CSS之BFC(Block Formatting Context)，bfcformatting

CSS之BFC(Block Formatting Context)，bfcformatting

這是我的第一篇部落格，不知道從什麼開始寫起，那就從我現在看的開始寫起吧。

以前我也不知道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 會 根據子項目的情況自 適應 高度 ，這個 特性 是 對父元素 使 用overflow:hidden/auto/scroll、 float:left/right 樣式可以閉合浮動的

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

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

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

②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 後可以阻止這種情況的發生。