CSS之BFC(區塊格式化上下文)
- 高洛峰原創
- 2017-02-17 13:22:541332瀏覽
以前我也不知道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 的元素，不和它的子元素發生外邊距折疊。
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中文網！