上一篇中說道了position、display、float三兄弟，它們三者之間擁有各自的特性以及相互作用。而這些影響歸根揭底都是盒子模型的位置問題，但盒子模型的位置問題不止是它們三者作用，還有本文中要說道的兩位：Margin Collapse和BFC。

Margin Collapse翻譯成中文是外邊距塌陷，也可以說外邊距疊加。他的定義是：

當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。

外邊距疊加有幾種情況，借用W3School幾張圖作為直觀說明：

第一種情況是兩垂直盒子：

第二種情況是父子盒子：

第三種情況是空內容元素本身疊加：

第四種情況是空元素本身疊加又疊加另一個元素的外邊距：

而在外邊距疊加中有一個注意事項，只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并。而且必須處于同一個BFC中。

因此，在外邊距疊加問題中又出現一個新的概念，什么是BFC？

w3c規范中的BFC的定義：

浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內容創建新的BFC（塊級格式上下文）。

也就是說，在BFC中的元素是不受外界影響的。

同樣，也就是說明創建了新的BFC的元素（例如浮動元素或者’overflow’值為’visible’以外的元素）與它的子元素的外邊距不會折疊。

當然，BFC同樣可以應用在清除浮動的不利影響下。

生成BFC的方法：

根元素

float屬性不為none

position為absolute或fixed

display為inline-block, table-cell, table-caption, flex, inline-flex

overflow不為visible

總結消除外邊距疊加的方法：

創建BFC

元素為inline-block時，它與其兄弟元素、子元素和父元素的外邊距都不會折疊

創建單側margin值