CSS之BFC(區塊格式化上下文)

以前我也不知道BFC是什麼，今天看了才知道原來以前常接觸，只是不知道專業名稱罷了。就像閉包、繼承一樣，以前常用到，只是不知道而已，今天我就來說一下，css定位之BFC。

BFC與清除浮動是有關係的，那我們就來說說，如何清除浮動，清除浮動主要有兩種方法：

①利用clear屬性，清除浮動

②使父容器形成BFC

在在講BCF之前，我要先說一下，我們通常控制元素佈局的定位方案主要有3種：普通流(Normal Flow) 、浮動(Floats) 和絕對定位(Absolute Positioning) 

***普通流(Normal Flow)

在普通流中，元素按照其在HTML 中的先後位置至上而下佈局，在這個過程中，行內元素水平排列，直到當行被佔滿然後換行，塊級元素則會被渲染為完整的一個新行， 除非另外指定，否則所有元素預設都是普通流定位，也可以說，普通流中元素的位置由該元素在HTML 文件中的位置決定。

***浮動 (Floats)

在浮動佈局中，元素首先按照普通流的位置出現，然後根據浮動的方向盡可能的向左邊或右邊偏移。

***絕對定位(Absolute Positioning)

在絕對定位佈局中，元素會整體脫離普通流，因此絕對定位元素不會對其兄弟元素造成影響（而浮動素會影響兄弟元素），而元素具體的位置由絕對定位的座標決定。

BFC 正是屬於普通流的，因此它對兄弟元素也不會造成什麼影響。

&&--BFC的定義--&&

在進行盒子元素佈局的時候， BFC 提供了一個環境，​​ 在這個環境中按照一定規則進行佈局不會影響到其它環境中的佈局。例如浮動元素會形成 BFC，浮動元素內部子元素的主要受此浮動元素影響，兩個浮動元素之間是互不影響的。也就是說，如果一個元素符合了成為 BFC 的條件，該元素內部元素的佈局和定位就和外部元素互不影響(除非內部的盒子建立了新的 BFC)， 是一個隔離了的獨立容器。

&&--BFC到底是什麼--&&

當涉及到可視化佈局的時候，Block Formatting Context提供了一個環境，​​HTML元素在這個環境中按照一定規則進行佈局。一個環境中的元素不會影響到其它環境中的佈局。例如浮動元素會形成BFC，浮動元素內部子元素的主要受此浮動元素影響，兩個浮動元素之間是互不影響的。這裡有點類似一個BFC就是一個獨立的行政單位的意思。

&&--怎樣才能形成BFC--&&

①float的值不為none。

②overflow的值不為visible。

③display的值為table-cell, table-caption, inline-block中的任何一個。

④position的值不為relative和static。

⑤css3中flex boxes

&&--BFC的作用--&&

①包含浮動元素(清除浮動)

BFC 會根據子元素的情況自適應高度，這個特性是對父元素使用特性是對父元素使用/auto/scroll、 float:left/right 樣式可以閉合浮動的

②不被浮動元素覆蓋
浮動元素會無視兄弟元素的存在， 覆蓋在兄弟元素的上面， 為該兄弟元素創建BFC 後可以阻止這種情況的出現

&&--BFC主要有三個特性--&&

①BFC  會阻止外邊距折疊
兩個相連的p 在垂直上的外邊距會發生疊加，在實際開發中，或許我們有時會不需要這種折疊，這時可以利用BFC 的其中一個特性－阻止外邊距疊加。阻止父子元素的 margin 折疊，僅當兩個區塊級元素毗鄰並且在同一區塊層級格式化上下文時，它們垂直方向之間的外邊距才會疊加。也就是說，即便兩個區塊級元素相鄰，但當它們不在同一區塊層級格式化上下文時它們的邊距也不會折疊。同時BFC 的元素，不和它的子元素發生外邊距折疊。

這也正是上面使用overflow: hidden 與overflow: auto 方法閉合浮動的原理，使用overflow: hidden 或overflow: auto 觸發浮動元素父元素的BFC 特性，從而可以包含浮動元素，閉合浮動。

W3C 的原文是“’Auto’ heights for block formatting context roots”，也就是 BFC 會根據子元素的情況自動適應高度，即使其子元素中包括浮動元素。

但是 IE6-7 不支援 W3C 的 BFC ，而是使用自產的 hasLayout 。從表現上來說，它跟 BFC 很相似，只是 hasLayout 本身存在著許多問題，導致了 IE6-7 中一系列的 bug 。觸發 hasLayout 的條件與觸發 BFC 有些相似，具體情況 Kayo 會另寫文章介紹。這裡Kayo 推薦為元素設定IE 特有的CSS 屬性zoom: 1 觸發hasLayout ，zoom 用於設定或檢索元素的縮放比例，值為「1」即使用元素的實際尺寸，使用zoom: 1 既可以觸發hasLayout 又不會對元素造成其他影響，相對來說會更為方便。

③BFC  可以阻止元素被浮動元素覆蓋
如上面所說，浮動元素的塊狀兄弟元素會無視浮動元素的位置，盡量佔滿一整行，這樣就會被浮動元素覆蓋，為該兄弟元素觸發BFC 後可以阻止這種情況的發生。

更多CSS之BFC(Block Formatting Context) 相關文章請關注PHP中文網！