外邊距折疊的幾種情況：
1、當一個元素出現在另一個元素上面時，第一個元素的底外邊距和第二個元素的頂外邊距發生疊加，效果圖如下：
PS：這里的元素特質塊級元素，inline元素豎向margin無效，display為inline-block的元素觸發了BFC也不會出現疊加，input，img之類的行內替換元素也不會疊加
2、當一個元素包含在另一個元素中時，他們的頂和底外邊距也會發生疊加，如下圖
3、外邊距也可以和本身發生疊加，前提有三個：空元素，有外邊距，無內邊距/邊框
PS：這條出現的情況比較難看直觀的看出來，所以不太好理解
看下面兩段代碼：
<div di="emptyDiv" style="margin-top:30px;margin-bottom:20px"></div>
<span id="spanA" style="background:green;">通過chrome控制台可以看出，外邊距並沒有疊加</span>
spanA的位置不是在emptyDiv下方50px的地方，而是30px的位置
<div di="emptyDiv" style="margin-top:10px;margin-bottom:20px"></div> <span style="background-color: green;">通過chrome控制台可以看出，外邊距並沒有疊加</span>
此時spanA的位置就在emptyDiv下方20px的地方，因為上下邊距疊加了
4、如果這個外邊距遇到另一個元素的外邊距，它還會發生合並，前提有四個：空元素，有外邊距，無內邊距/邊框，存在多個元素
看兩段代碼：
<div di="emptyDiv" style="margin-top:30px;margin-bottom:20px"></div> <div id="divB" style="margin-top:20px;margin-bottom:20px;height:20px;background-color: #0E2D5F"></div>
通過chrome控制台可以看出，divB被放置在emptyDiv下方30px的地方（只看這段你可能會認為是divB的上邊距和emptyDiv的下邊距疊加了，其實不是這樣的），再結合下一段代碼你就能完全明白了
<div di="emptyDiv" style="margin-top:30px;margin-bottom:20px"></div> <div id="divB" style="margin-top:50px;margin-bottom:20px;height:20px;background-color: #0E2D5F"></div>
通過chrome控制台可以看出，divB被放置在emptyDiv下方50px的地方，如果用“divB的上邊距和emptyDiv的下邊距疊加了”理解，divB將被放置在80px的地方，事實上這里只顯示出了50px，原因就是emptyDiv的上下邊距發生的疊加。你也可以通過給emptyDiv加個邊框，再去掉會明顯看到divB位置的變化。
參考資料：
http://www.jb51.net/css/12198.html
https://segmentfault.com/q/1010000004407143