一：什么是margin塌陷 ？
在标准文档流中，竖直方向（左右方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin值，这就是margin的塌陷现象。
二：margin塌陷分类 ？
（1）兄弟盒子之间的塌陷问题。
（2）父子盒子之间的塌陷问题。
三：详细分析
（1）兄弟盒子之间的塌陷问题
比如下面两个盒子模型排列：
<body>
<div style="width:400px;height:100px;background:#ea8080;margin-bottom:30px;color:#fff;text-align:center;line- height:100px;">层1</div>
<div style="width:400px;height:100px;background:#f6adad;margin-top:20px;color:#fff;text-align:center; line-height:100px;">层2</div>
</body>
本来我们以为上面的盒子设置了margin-bottom的值，下面的盒子模型中设置了margin-top值，两者之间的距离应该是（30px+20px=50px）,但是结果两都之间的距离是30px如下面的图所示：
margin塌陷问题.jpg
遇到这样的情况，两个兄弟盒子之间的间距应该是按照其中比较大的那个值来取。
解决方案：
在层2那层再包裹一层，设置属性overflow:hidden，这样上下之间的距离就是50px了。代码如下：
<div style="width:400px;height:100px;background:#ea8080;margin-bottom:30px;color:#fff;text-align:center;line-height:100px;">层1</div>
<div style="overflow:hidden;">
<div style="width:400px;height:100px;background:#f6adad;margin-top:20px;color:#fff;text-align:center;line-height:100px;">层2</div>
</div>
但是这样的弊端就是改变了HTML结构,在开发中是不能采用的。所以最好的方式是只设置层1的margin-bottom值或是 margin-top值。
（2）父子盒子之间的塌陷问题
比如下面两个盒子模型排列：
父子盒子.jpg
<style>
.box1 {
width: 300px;
height: 300px;
background: #ec8180;
}
.box2 {
width: 200px;
height: 200px;
background: #f7aeaf;
margin-top: 50px;
}
</style>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
当给box2层增加样式margin-top:50的时候，并没有看到父盒子与子盒子之间会有间距50px的距离，而是在父盒子上面会发现50px的间距如下图所示：
父子盒子塌陷.jpg
解决方案：
（1）给父元素father添加一个border边框，比如给box1添加样式：border：1px solid transparent这种方式造成贴合的样子；
（2）给父元素添加一个overflow: hidden;
（3）给父元素添加一个position: fixed;
（4）给父元素添加一个display: table;
（5）将子元素都margin改为父元素的padding
（6）给子元素son添加一个兄弟元素属性为content:"";overflow: hidden;
网友评论