上一篇中說道了position、display、float三兄弟，它們?nèi)咧g擁有各自的特性以及相互作用。而這些影響歸根揭底都是盒子模型的位置問題，但盒子模型的位置問題不止是它們?nèi)咦饔茫€有本文中要說道的兩位：Margin Collapse和BFC。
Margin Collapse翻譯成中文是外邊距塌陷，也可以說外邊距疊加。他的定義是：
當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
外邊距疊加有幾種情況，借用W3School幾張圖作為直觀說明：
第一種情況是兩垂直盒子：
第二種情況是父子盒子：
第三種情況是空內(nèi)容元素本身疊加：
第四種情況是空元素本身疊加又疊加另一個(gè)元素的外邊距：
而在外邊距疊加中有一個(gè)注意事項(xiàng)，只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。而且必須處于同一個(gè)BFC中。
因此，在外邊距疊加問題中又出現(xiàn)一個(gè)新的概念，什么是BFC？
w3c規(guī)范中的BFC的定義：
浮動(dòng)元素和絕對(duì)定位元素，非塊級(jí)盒子的塊級(jí)容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級(jí)盒子，都會(huì)為他們的內(nèi)容創(chuàng)建新的BFC（塊級(jí)格式上下文）。
也就是說，在BFC中的元素是不受外界影響的。
同樣，也就是說明創(chuàng)建了新的BFC的元素（例如浮動(dòng)元素或者’overflow’值為’visible’以外的元素）與它的子元素的外邊距不會(huì)折疊。
當(dāng)然，BFC同樣可以應(yīng)用在清除浮動(dòng)的不利影響下。
生成BFC的方法：
根元素
float屬性不為none
position為absolute或fixed
display為inline-block, table-cell, table-caption, flex, inline-flex
overflow不為visible
總結(jié)消除外邊距疊加的方法：
創(chuàng)建BFC
元素為inline-block時(shí)，它與其兄弟元素、子元素和父元素的外邊距都不會(huì)折疊
創(chuàng)建單側(cè)margin值
