解决margin击穿的几种方法

前端开发过程中经常会遇到这种问题，明明设置的是子元素的margin值，结果却作用在了父元素上，例如的代码：

HTML部分：嵌套两层div

<div class="box">
    <div class="inner">
        margin击穿
    </div>
</div>

style/css部分：给元素设置宽高和背景，便于观察，给内部的自元素设置一个 100px 的上边距。

.box{
    margin: 0 auto;
    background: red;
    width: 500px;
    height: 300px;
}
.inner{
    margin-top: 100px;
    background: green;
    color: #FFF;
    width: 200px;
    height: 100px;
}

我明明只设置了子元素 .inner 的 margin 值，结果这个 100px 的 margin-top 却作用在了父元素 .box 上，运行结果如下图，这就是所谓的margin击穿。

margin 击穿就是两个元素嵌套，哪个 margin 较大则哪个生效。

解决 margin 击穿的方法有以下几种：

1、给父元素加一个边框

.box{
    1px solid #000;
}

缺点：会多一个边框，不可取。

2、在父元素添加 overflow:auto; (推荐) 或者 overflow:hidden;

.box{
    overflow:auto;
}

3、给子元素设置 display:inline-block;

.inner{
    display:inline-block;
}

4、给子元素设置浮动再清除浮动，太麻烦，不推荐。

.inner{
    float:laft;
}
.box::after{
    content: '';
    display: block;
    clear: both;
}

未经允许不得转载：w3h5 » 解决margin击穿的几种方法