BFC簡單介紹

W3C關於BFC的一個解釋:

 

Block Formatting Context（塊格式化上下文）是W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。

在建立了 Block Formatting Context 的元素中，其子元素會一個接一個地放置。垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰的元素之間的垂直距離取決於 ‘margin’ 特性。在 Block Formatting Context 中相鄰的塊級元素的垂直邊距會摺疊（collapse）。

在 Block Formatting Context 中，每個元素左外邊與包含塊的左邊相接觸（對於從右到左的格式化，右外邊接觸右邊）， 即便存在浮動也是如此（儘管一個元素的內容區域會因爲浮動而壓縮），除非這個元素也建立了一個新的 Block Formatting Context 。

看起來比較蛋疼是吧，另外一個通俗點的解釋是：在普通流中的 Box(框) 屬於一種 formatting context(格式化上下文) ，類型能夠是 block ，或者是 inline ，但不能同時屬於這二者。而且， Block boxes(塊框) 在 block formatting context(塊格式化上下文) 裏格式化， Inline boxes(塊內框) 則在 inline formatting context(行內格式化上下文) 裏格式化。任何被渲染的元素都屬於一個 box ，而且不是 block ，就是 inline 。即便是未被任何元素包裹的文本，根據不一樣的狀況，也會屬於匿名的 block boxes 或者 inline boxes。因此上面的描述，便是把全部的元素劃分到對應的 formatting context 裏。

那BFC究竟是啥？就是一個做用範圍。能夠把它理解成是一個獨立的容器，而且這個容器的裏box的佈局，與這個容器外的絕不相干。

簡單地說：Block Formatting Context就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會在佈局上影響到外面的元素，反之也是如此。

看看BFC的觸發條件

• float不爲none
• overflow不爲visible (IE6無效)
• 「display」的值是」table-cell」,」table-caption」,或」inline-block」
• 「position」的值既不是」static」也不是」relative」
• IE的hasLayout會觸發一個新的block formatting context

而BFC的特性是

• 不存在collapsing margins問題
• 邊緣不會和float box重疊

 

第一個margin不會疊加的特性，能夠理解爲兩個處於普通流的盒子，會有margin疊加的問題，是由於他們屬於相同的BFC，當他自身建立了一個新的BFC時，這個問題就不存在了

第二個特性就特別有用了，由於元素觸發了BFC的話，就不會被float元素覆蓋，當子元素所有浮動的時候也可以正確地包含了

可是在 IE6 IE7 IE8(Q) 中沒有觸發 hasLayout 並在其餘瀏覽器中建立了 Block Formatting Context 的元素的表現會有差別。具體能夠參考w3help

保險的解決方案就是既觸發IE的hasLayout,又觸發BFC，具體的css就是既overflow:hidden，又zoom:1(雖然zoom並不能經過校驗)，另外overflow還有一個問題就是會影響盒子的表現

相對於常常要限寬，還有一大堆BUG的float來佈局，用BFC來佈局會至關方便