本文簡單總結一下css佈局中常見的兩種margin摺疊情況，以及解決方法。
1、兄弟元素之間發生摺疊
.box1, .box2{
width: 200px;
hieght: 200px;
margin: 20px;
}
<div class="box1">hello</div>
<div class="box2">world</div>
大家覺得這 2個div 之間會發生什麼？會合體呢？還是分開？來看看 DEMO1 margin摺疊。
運行上面的代碼，會發現box1和box2之間原本應有20px+20px的間距，但實際只有20px的間距。好吧，它們真的合體了。按照常規思路，這 2div之間的空白應該是第一個 p 的 margin-bottom 20px 加上第二 div 的 margin-top 20px，即 20 + 20px = 40px ，但結果卻只有20px。這就是 margin摺疊。
css1的說明：外邊距用來指定非浮動元素與其周圍盒子邊緣的最小距離。兩個或兩個以上的相鄰的垂直外邊距會被摺疊並使用它們之間最大的那個外邊距值。多數情況下，摺疊垂直外邊距可以在視覺上顯得更美觀，也更貼近設計師的預期。
總結：
1. 兄弟元素之間，首先是非浮動元素 2. 其次只有垂直的上下margin會產生摺疊（即margin-top, margin-bottom） 3. 摺疊後取最大的margin值爲最終值。
2、父子元素之間發生摺疊
.parent{
width: 200px;
height: 200px;
background: red;
}
.child{
width: 200px;
height: 200px;
background: yellow;
margin: 20px;
}
<div className="parent">
<div className="child">child</div>
</div>
運行上面的代碼，會發現parent和child之間，child的上邊原本應有20px的間距，但實際它們之間沒有邊距。好吧，看來父子元素之間也會發生合體。這就是父子元素間的margin摺疊情況。
解決辦法：
- demo1: 爲parent元素或child添加屬性：display: inline-block;
- demo2: 爲parent元素或child添加屬性：float: left;
- demo3: 爲parent元素或child添加屬性：overflow：!visible;的任何一種情況。
- demo4: 爲child元素添加屬性: position: aboslute;
- demo5: 爲parent元素加上邊框。
以上5種方法都可以解決父子元素margin摺疊的問題，當然，還有其他方法也可以解決margin摺疊，這裏就不一一列舉了，在這裏給出一個官方的總結，不做具體原因分析，記住就可以啦~
3、如何避免margin摺疊之6個原則？
- margin 摺疊元素只發生在塊元素上；demo1;
- 浮動元素不與其他元素 margin 摺疊；demo2;
- 定義了屬性overflow且值不爲visible（即創建了新的塊級格式化上下文）的塊元素，不與它的子元素髮生margin 摺疊；demo3;
- 絕對定位元素的 margin 不與任何 margin 發生摺疊。 特殊：根元素的 margin 不與其它任何 margin 發生摺疊；demo4;
- 如果常規流中的一個塊元素沒有border-top、padding-top，且其第一個浮動的塊級子元素沒有間隙，則該元素的上外邊距會與其常規流中的第一個塊級子元素的上外邊距摺疊。 demo5;
- 如果一個元素的 min-height屬性爲0，且沒有上或下邊框以及上或下內邊距，且 height 爲0或者auto，且不包含行框，且其屬於常規流的所有孩子的外邊距都摺疊了，則摺疊其外邊距。
瞭解了margin摺疊的6原則，我們就不難消除margin摺疊啦，比如上述的5個demo方法，我把它改成非塊元素，讓它浮動，讓它絕對定位，讓它 overflow:hidden, demo3,用邊框隔開它們 …demo5…隨你怎樣，信手拈來。
