margin塌陷
margin塌陷發(fā)生在下列兩種情況中
1.垂直并列
/*HTML部分*/
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
/*CSS部分*/
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background: yellowgreen;
}
.box2{
width: 200px;
height: 200px; background: gray;
}
</style>
對box1我們?yōu)槠湓O(shè)置margin-bottom：50px;對box2我們?yōu)槠湓O(shè)置margin-top： 40px;
我們肯定會很理所當(dāng)然的認(rèn)定這兩個盒子之間的距離為90px，事實上并非如此.如下圖所示：
兩盒子之間的距離僅是50px，也就是說兩盒子之間的margin出現(xiàn)了重疊部分，故而我們可以得出：垂直之間塌陷的原則是以兩盒子最大的外邊距(margin)為準(zhǔn)。
2.嵌套關(guān)系
/*CSS部分*/
<style>
.box1{
width:400px;
height:400px;
background: pink;
}
.box2{
width:200px;
height:200px;
background: lightblue;
}
</style>
/*HTML部分*/
<body>
<divclass="box1">
<divclass="box2"></div>
</div>
</body>
如圖示
當(dāng)為子盒子添加margin-top：10px;時會發(fā)生如下情況：
子盒子和父盒子之間并沒出現(xiàn)期望的10px間隙而是父盒子與子盒子一起與頁面頂端產(chǎn)生了10px間隙。
解決方法：
（1）為父盒子設(shè)置border，為外層添加border后父子盒子就不是真正意義上的貼合。
（2）為父盒子添加overflow：hidden；
（3）為父盒子設(shè)定padding值。
了解下BFC(Block Fommat Content)塊級格式上下文，就能很清楚的避開這些坑
了解BFC
