一：什么是margin塌陷 饲做？
在標(biāo)準(zhǔn)文檔流中逼纸，豎直方向（左右方向的不會(huì)出現(xiàn)塌陷現(xiàn)象）的margin會(huì)出現(xiàn)疊加現(xiàn)象嗅蔬，即較大的margin會(huì)覆蓋掉較小的margin歌亲，豎直方向的兩個(gè)盒子中間只有一個(gè)較大的margin值菇用，這就是margin的塌陷現(xiàn)象。
二：margin塌陷分類 陷揪？
（1）兄弟盒子之間的塌陷問題惋鸥。
（2）父子盒子之間的塌陷問題。
三：詳細(xì)分析
（1）兄弟盒子之間的塌陷問題
比如下面兩個(gè)盒子模型排列：
<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>
本來我們以為上面的盒子設(shè)置了margin-bottom的值悍缠，下面的盒子模型中設(shè)置了margin-top值卦绣，兩者之間的距離應(yīng)該是（30px+20px=50px）,但是結(jié)果兩都之間的距離是30px如下面的圖所示：
遇到這樣的情況，兩個(gè)兄弟盒子之間的間距應(yīng)該是按照其中比較大的那個(gè)值來取飞蚓。
解決方案：
在層2那層再包裹一層滤港，設(shè)置屬性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結(jié)構(gòu),在開發(fā)中是不能采用的溅漾。所以最好的方式是只設(shè)置層1的margin-bottom值或是 margin-top值。
（2）父子盒子之間的塌陷問題
比如下面兩個(gè)盒子模型排列：
<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>
當(dāng)給box2層增加樣式margin-top:50的時(shí)候著榴，并沒有看到父盒子與子盒子之間會(huì)有間距50px的距離樟凄，而是在父盒子上面會(huì)發(fā)現(xiàn)50px的間距如下圖所示：
解決方案：
（1）給父元素father添加一個(gè)border邊框，比如給box1添加樣式：border：1px solid transparent這種方式造成貼合的樣子兄渺；
（2）給父元素添加一個(gè)overflow: hidden;
（3）給父元素添加一個(gè)position: fixed;
（4）給父元素添加一個(gè)display: table;
（5）將子元素都margin改為父元素的padding
（6）給子元素son添加一個(gè)兄弟元素屬性為content:"";overflow: hidden;
