CSS之BFC(BlockFormattingContext)

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

①利用 clear屬性，清除浮動

②使父容器形成BFC

在講BCF之前，我要先說一下，我們通?？刂圃夭季值亩ㄎ环桨钢饕?種：普通流 (Normal Flow) 、浮動 (Floats) 和絕對定位 (Absolute Positioning)

***普通流(Normal Flow)

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

***浮動 (Floats)

在浮動布局中，元素首先按照普通流的位置出現(xiàn)，然后根據(jù)浮動的方向盡可能的向左邊或右邊偏移。

***絕對定位 (Absolute Positioning)

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

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

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

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

&&--BFC到底是什么--&&

當涉及到可視化布局的時候，Block Formatting Context提供了一個環(huán)境，HTML元素在這個環(huán)境中按照一定規(guī)則進行布局。一個環(huán)境中的元素不會影響到其它環(huán)境中的布局。比如浮動元素會形成BFC，浮動元素內(nèi)部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。這里有點類似一個BFC就是一個獨立的行政單位的意思。

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

①float的值不為none。

②overflow的值不為visible。

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

④position的值不為relative和static。

⑤css3中flex boxes

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

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

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

②不被浮動元素覆蓋
浮動元素會無視兄弟元素的存在， 覆蓋在兄弟元素的上面， 為該兄弟元素創(chuàng)建BFC 后可以阻止這種情況的出現(xiàn)

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

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

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

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

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

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

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com