一、同级块级元素塌陷
html
<h2>
同级块级元素塌陷
</h2>
<div class="block1">
block1
</div>
<div class="block2">
block2
</div>
<div class="block3">
<div class="ib1 ib">
同级元素1
</div>
<div class="ib2 ib">
同级元素2
</div>
<div class="ib2 ib">
同级元素3
</div>
</div>
css
body{
margin:50px;
background-color:#ccc;
}
.block1 {height: 50px;padding: 10px;margin: 10px;background: #fff;}
.block2 {height: 50px;padding: 10px;margin: 20px;background: #999;}
.ib {display:inline-block;width: 45%;margin: 10px;border: 1px solid #ff0;}
结果
图1
图2
图3
先看block1跟block2，按道理说，block1 有margin-bottom: 10px; block2有margin-top: 20px;那么block1跟block2之间的间距应该是有30px才对，事实上却只有20px，值比较大的margin起了作用；
再看块级内联元素，ib1、ib2、ib3，每个ib之间的margin是10px；结果是每个ib之间的左右和上下margin都有20px;
最后再看浮动的块级元素：图3，margin也是没有塌陷的。
结论说明margin塌陷只发生在真正意义的块级元素上（浮动跟那些inline-block不算），浏览器应该是希望我们块级元素只设置上下其中的一个margin就好了，避免margin塌陷。
二、包裹元素塌陷
html
<div class="p">
<div class="c">
我是子元素
</div>
</div>
css
.p {background: #fff;margin: 10px;}
.p .c {padding: 5px;background: #f00;margin: 20px;}
结果
当标签没有任何内容填充或者padding跟border时，它的高度由子元素的高度（包含了padding和border）决定，
这个时候，父元素跟子元素之间的高度就一致，上下的margin就会发生重叠，同样值大者起效。
所以要避免这种情况就要对父元素进行处理：
填充内容；
添加padding；
添加border；
再有一种就是为父元素添加 overflow：hidden；