两种常见的margin-top失效

关于margin-top失效，常见的情况

1. 兄弟元素之间失效，例如

    <div>
        <div class="box1"></div>
        <div class="box2"></div>
    </div>

.box1 {
    float: left;
}
.box2 {
    clear: both;
    margin-top: 10px;
}

由于box2没有浮动，会导致margin-top失效。常用解决办法是：
box1与box2之间加上一个空盒子

<div style="clear:both;"></div>

2. 子元素设置margin-top作用于父容器，例如

    <div class="box">
        <div class="box1"></div>
    </div>

.box {
    height: 1000px;
    background: pink;
}
.box1 {
    background: #e4e4e4;
    height: 100px;
    margin-top: 100px;
}

常用解决办法：
1> 用父容器box的padding-top代替box1的margin-top
2> 父容器设置overflow：hidden; 属性
3> 给父容器加border，border不能为none
参考：https://blog.csdn.net/d1060060644/article/details/77621013