最近遇到乙個專業的名詞，不是很懂，所以了解了一下，並總結歸納一下。首先清楚我們的問題是什麼？
bfc是什麼？怎麼建立？什麼情況下建立？有什麼特性和作用？
bfc 就是一種屬性，這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。
1，浮動元素，float 除 none 以外的值
2，絕對定位元素，position 的absolute，fixed（css3新增觸發條件）值
3，display為以下其中之一的值inline-blocks，table-cells，table-captions（css3新增觸發條件）
但是，"display:table" 本身並不產生 bfc，而是由它產生匿名框，匿名框中包含 "display:table-cell" 的框會產 bfc。 總之，對於 "display:table" 的元素，產生 bfc 的是匿名框而不是 "display:table"。
4，overflow除了 visible 以外的值（hidden，auto，scroll）
在 css3 中，bfc 叫做 flow root。
值得注意的是，bfc 並不是元素，而是某些元素帶有的一些屬性，因此，是上面這些元素產生了 bfc ，而它們本身並不是 bfc ，這個概念需要區分清楚。
1，bfc 會阻止外邊距摺疊
兩個相連的 div 在垂直上的外邊距會發生疊加；外邊距摺疊的規則：僅當兩個塊級元素相鄰並且在同乙個塊級格式化上下文時，它們垂直方向之間的外邊距才會疊加；所以說，即便兩個塊級元素相鄰，但當它們不在同乙個塊級格式化上下文時它們的邊距也不會摺疊。因此，阻止外邊距摺疊只需產生新的 bfc 。
例子： 三個 div 各包含乙個 p 元素，三個 div 及其包含的 p 元素都有頂部和底部的外邊距。但只有第三個 div 的邊距沒有與它的子元素 p 的外邊距摺疊。
第一段第二段
第三段 //新增了display：inline-block屬性，具有bfc屬性
第一段第二段
第一段第一段2
第二段第二段2
參考文章
BFC 塊級格式化上下文
bfc簡述 bfc即 block formatting contexts 塊級格式化上下文 是 w3c css2.1 規範中的乙個渲染規範，是頁面中的一塊渲染區域並且有自己獨有的渲染規則，決定了子元素的渲染位置以及和其他元素之間的關係和相互作用。bfc規則 同一bfc內的塊元素的上邊的邊距重疊 規定...
BFC塊級格式化上下文
塊格式化上下文 block formatting context，bfc 是web頁面的可視css渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素互動的區域。根元素 浮動元素 元素的 float 不是 none 絕對定位元素 元素的 position 為 absolute 或 fi...
BFC塊級格式化上下文
一 bfc理解 bfc block formatting context 塊級格式化上下文。我的理解就是他是乙個獨立的大箱子，箱子內屬於自己的一塊區域，與外界無關 二 如何觸發bfc？滿足下列任意乙個或多個條件即可 三 bfc布局規則 四 使用場景 解決margin重疊的問題 margin重疊，未使...