摺疊結果計算規則：
1、兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值；
2、兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值；
3、兩個外邊距一正一負時，摺疊結果是兩者的相加的和怎麼避免外邊距摺疊
怎麼避免外邊距摺疊：
-
浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 摺疊（注意這裏指的是上下相鄰的元素）
-
創建了塊級格式化上下文的元素，不和它的子元素髮生 margin 摺疊（注意這裏指的是創建了BFC（BFC：塊級格式化上下文，它是指一個獨立的塊級渲染區域，只有Block-level BOX參與，該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關。）的元素和它的子元素不會發生摺疊。 我們都知道觸發BFC的因素是float（除了none）、overflow（除了visible）、display（table-cell/table-caption/inline-block）、position（除了static/relative） 很明顯大家可以看出來相鄰元素不發生摺疊的因素是觸發BFC因素的子集，也就是說如果我爲上下相鄰的元素設置了overflow:hidden，雖然觸發了BFC，但是上下元素的上下margin還是會發生摺疊。 這個問題其實和BFC並沒有太大的關係，希望大家不要濫用BFC，要知道BFC不是全能，創建BFC的初衷只是爲了讓元素本身（包括它的子元素）能夠正確的計算自己的寬高。
-
zoom，這是IE瀏覽器最初支持的縮放屬性，到現在只有最新的webkit核心的瀏覽器也支持。但只是在IE8以下的瀏覽器下才可成功觸發hasLayout，對於非IE瀏覽器也是沒有效果的，所以還是需要同樣的去創建BFC。
關於最終如何解決這樣的問題，我的建議是在寫的時候儘量用同一方向的margin，比如都設置爲top或者bottom，因爲你在實踐的時候有時不需要爲每個元素設置浮動、inline-block或者absolute 。