1、什么是“ Margin塌陷（重疊） ”？

在標準文檔流中，豎直方向（是豎直方向，水平方向的不會出現(xiàn)塌陷現(xiàn)象）的margin會出現(xiàn)疊加現(xiàn)象，即較大的margin會覆蓋掉較小的margin，豎直方向的兩個盒子中間只有一個較大的margin，這就是margin的塌陷現(xiàn)象。

2、Margin塌陷現(xiàn)象何時產(chǎn)生？

margin的塌陷現(xiàn)象分兩種情況：1，兄弟關(guān)系的盒子 2 ，父子關(guān)系的盒子

注：兩個盒子的垂直外邊距完全接觸才會觸發(fā)。

3、現(xiàn)象實例

（1）兄弟關(guān)系盒子垂直并列（少見）

兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值。

兩個相鄰的外邊距都是負數(shù)時，折疊結(jié)果是兩者絕對值的較大值。

兩個外邊距一正一負時，折疊結(jié)果是兩者的相加的和。

step1：首先設(shè)置兩個DIV,并為其制定寬高

step2：對box1我們?yōu)槠湓O(shè)置margin-bottom：50px;

　　?　 對box2我們?yōu)槠湓O(shè)置margin-top： 20px;

兩盒子之間的距離僅是50px，兩盒子之間的margin出現(xiàn)了重疊部分，故而我們可以得出：垂直之間塌陷的原則是以兩盒子最大的外邊距為準。

（2）父子關(guān)系盒子（常見）

step1：首先設(shè)置兩個嵌套關(guān)系的DIV,并為其制定寬高

step2: 當為內(nèi)層盒子添加margin-top:10px時，會出現(xiàn)

子盒子和父盒子之間并沒出現(xiàn)期望的10px間隙而是父盒子與子盒子一起與頁面頂端產(chǎn)生了10px間隙（即父級盒子往下塌陷了10px）。

即無論給子元素設(shè)不設(shè)置margin-top值，其都不發(fā)生作用，都會作用于父元素身上

4、解決方法

（1）為父盒子設(shè)置border，為外層添加border后父子盒子就不是真正意義上的貼合；

（2）為父盒子設(shè)定padding值，抵消掉子元素設(shè)置margin值的方式；

（3）為父盒子添加overflow：hidden；

（4）為父盒子添加position：fixed；

（5）為父盒子添加 display：table；

（6）利用偽元素給子元素的前面添加一個空元素。