CSS框模型中關於外邊距(margin)摺疊的情況

　　最近做了個項目，居然在一個小小的css問題上折騰了很久很是糾結——外邊距摺疊的問題。今天難得清閑，就把這個問題研究了一下，才發現大有學問，所以寫篇博文整理一下，以便更加牢記！

　　外邊距摺疊，指的是毗鄰的兩個或多個外邊距 (margin) 在垂直方向會合并成一個外邊距。

　　觸發條件：

1.  毗鄰，沒有被非空內容、padding、border 或 clear 分隔開的margin特性. 非空內容就是說這元素之間要麼是兄弟關係或者父子關係
2.  這些 margin 都處於普通流中，即非浮動元素，非定位元素

　　垂直方向外邊距合并的計算

　　1) 參加摺疊的margin都是正值：取其中 margin 較大的值為最終 margin 值。

<div style="height:50px; margin-bottom:50px; width:50px; background-color: red;">A</div><div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>

　　：
　　　　　　

 

　　 2). 參與摺疊的 margin 都是負值：取的是其中絕對值較大的，然後，從 0 位置，負向位移。

<div style="height:100px; margin-bottom:-75px; width:100px; background-color: red;">A</div><div style="height:100px; margin-top:-50px; margin-left:50px; width:100px; background-color: green;">B</div>

　　：
　　　　　

　　

　　3). 參與摺疊的 margin 中有正值，有負值：先取出負 margin 中絕對值中最大的，然後，和正 margin 值中最大的 margin 相加。

<div style="height:50px; margin-bottom:-50px; width:50px; background-color: red;">A</div><div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>

　　 ：
　　　　　　

　　4). 相鄰的 margin 要一起參與計算，不得分步計算

　　要注意，相鄰的元素不一定非要是兄弟節點，父子節點也可以，即使不是兄弟父子節點也可以相鄰。

　　而且，在計算時，相鄰的 margin 要一起參與計算，不得分步計算。

<div style="margin:50px 0; background-color:green; width:50px;">    <div style="margin:-60px 0;">           <div style="margin:150px 0;">A</div>    </div></div><div style="margin:-100px 0; background-color:green; width:50px;">    <div style="margin:-120px 0;">           <div style="margin:200px 0;">B</div>    </div></div>

　　錯誤的計算方式：算 A 和 B 之間的 margin，分別算 A 和其父元素的摺疊，然後與其父元素的父元素的摺疊，這個值算出來之後，應該是 90px。依此法算出 B 的為 80px；然後，A和B摺疊，margin 為 90px。

　　請注意，多個 margin 相鄰摺疊成一個 margin，所以計算的時候，應該取所有相關的值一起計算，而不能分開分步來算。

　　以上例子中，A 和 B 之間的 margin 摺疊產生的 margin，是6個相鄰 margin 摺疊的結果。將其 margin 值分為兩組：

　　正值：50px，150px，200px

　　負值：-60px，-100px，-120px

　　根據有正有負時的計算規則，正值的最大值為 200px，負值中絕對值最大的是 -120px，所以，最終摺疊後的 margin 應該是 200 + (-120) = 80px。

　　

　　5). 浮動元素、inline-block 元素、絕對位置元素的 margin 不會和垂直方向上其他元素的 margin 摺疊

<div style="margin-bottom:50px; width:50px; height:50px; background-color:green;">A</div><div style="margin-top:50px; width:100px; height:100px; background-color:green; float:left;">    <div style="margin-top:50px; background-color:gold;">B</div></div>

　　：
　　　　　　

　　6). 建立了塊級格式化上下文1的元素，不和它的子項目發生 margin 摺疊

　　以 “overflow : hidden” 的元素為例：

<div style="margin-top:50px; width:100px; height:100px; background-color:green; overflow:hidden;">    <div style="margin-top:50px; background-color:gold;">B</div></div>

　　若 B 和它的 "overflow:hidden" 包含塊發生 margin 摺疊的話，金色的條應該位於綠色塊的最上方，否則，沒有發生。

　　：
　　　　

　　7). 元素自身的 margin-bottom 和 margin-top 相鄰時也會摺疊

　　自身 margin-bottom 和 margin-top 相鄰，只能是自身內容為空白，垂直方向上 border、padding 為 0。

<div style="border:1px solid red; width:100px;">    <div style="margin-top: 100px;margin-bottom: 50px;"></div></div>

 

　　以上代碼運行後，我們講得到的是紅色邊框的正方形，方框的寬高都應該是 100px，高度不應該是 150px。

　　：