摘要：就是神奇之一，它也是最熟悉的陌生人，因?yàn)槟阋徊恍⌒木蜁?huì)觸發(fā)它然而你并沒(méi)有意識(shí)到它正在神奇地發(fā)揮作用。最常見(jiàn)的有和，中還增加了和，這里就不深入研究了。其根本原理就是它們處于同一個(gè)，符合屬于同一個(gè)的兩個(gè)相鄰元素的會(huì)發(fā)生重疊的規(guī)則。

BFC，你也許聽(tīng)過(guò)這個(gè)詞，但是你可能不是很有底氣地解釋清楚。
寫(xiě)樣式的時(shí)候，往往加了一個(gè)樣式或者改了一個(gè)屬性，就能達(dá)到你期望的效果，一切都是如此地神奇。
BFC就是神奇之一，它也是最熟悉的陌生人，因?yàn)槟阋徊恍⌒木蜁?huì)觸發(fā)它然而你并沒(méi)有意識(shí)到它正在神奇地發(fā)揮作用。

我們先看看CSS布局的基本單位：

block-level box: display 屬性為 block, list-item, table 的元素，會(huì)生成 block-level box，并且參與 block formatting context

inline-level box: display 屬性為 inline, inline-block, inline-table 的元素，會(huì)生成 inline-level box，并且參與 inline formatting context

那這個(gè)formatting context又是什么玩意兒？

它是W3C CSS2.1規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。也就是說(shuō)我們平時(shí)在布局的時(shí)候，它默默地提供了一個(gè)環(huán)境，使得HTML元素在這個(gè)環(huán)境中按照一定規(guī)則進(jìn)行布局。

最常見(jiàn)的formatting context有Block Formatting Context(BFC)和Inline Formatting Context(IFC)，CSS3中還增加了GridLayout Formatting Context(GFC)和Flex Formatting Context(FFC)，這里就不深入研究了。

BFC定義：它是一個(gè)獨(dú)立的渲染區(qū)域，只有block-level box參與，其中的元素按照規(guī)定的渲染規(guī)則進(jìn)行布局，并且這個(gè)區(qū)域與外部毫不相干。

剛才我們說(shuō)到BFC中的元素有一套規(guī)定的布局規(guī)則：

內(nèi)部的元素會(huì)在垂直方向一個(gè)接一個(gè)地放置

元素垂直方向的距離由margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰元素的margin會(huì)發(fā)生重疊

每個(gè)元素的左外邊距與包含塊的左邊界相接觸(對(duì)于從左往右，否則相反)，即使存在浮動(dòng)也是如此

BFC的區(qū)域不會(huì)與float元素重疊

計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素，反之也如此

剛才我們又提到BFC是一塊渲染區(qū)域，那這塊渲染區(qū)域到底在哪，它又是有多大，這些由生成BFC的元素來(lái)決定，CSS2.1中規(guī)定滿(mǎn)足下列CSS聲明的元素便會(huì)生成BFC（觸發(fā)規(guī)則）：

根元素

float的值不為none

overflow的值不為visible

position的值為absolute或fixed

display的值為inline-block, table-cell, table-caption, flex, inline-flex
注：display: table也認(rèn)為可以生成BFC，主要原因是table會(huì)默認(rèn)生成一個(gè)匿名的table-cell，正是這個(gè)匿名的table-cell生成了BFC

上面這些CSS聲明的元素生成了BFC，而它們本身并不是BFC，這一點(diǎn)需要區(qū)分。

說(shuō)了這么多有用沒(méi)用的，我們平時(shí)布局的時(shí)候到底怎么應(yīng)用呢：

1.防止垂直margin重疊

有點(diǎn)布局經(jīng)驗(yàn)的朋友都知道m(xù)argin collapse，也就是相鄰的垂直元素同時(shí)設(shè)置了margin后，實(shí)際margin值會(huì)塌陷到其中較大的那個(gè)值。其根本原理就是它們處于同一個(gè)BFC，符合“屬于同一個(gè)BFC的兩個(gè)相鄰元素的margin會(huì)發(fā)生重疊”的規(guī)則。

我們可以在其中一個(gè)元素外面包裹一層容器，并觸發(fā)該容器生成一個(gè)BFC。那么兩個(gè)元素便屬于不同的BFC，就不會(huì)發(fā)生margin重疊了：

    
我屬于一個(gè)BFC
    

        
我屬于另一個(gè)BFC
    

如果是我的話(huà)會(huì)直接設(shè)置200px，或者只設(shè)置其中一個(gè)元素的margin（懶可以偷，但原理需知道）

2.防止浮動(dòng)子元素高度塌陷

    

        
float: left
        
float: left
    

如果我們將.parent元素的overflow: hidden去掉，那么.parent元素就獲取不到浮動(dòng)元素的高度了。但是加上overflow屬性后觸發(fā)了BFC，計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與了計(jì)算。

3.防止文字（或其他元素）環(huán)繞

    

        
float: left
        
我只是文字但我不會(huì)環(huán)繞我只是文字但我不會(huì)環(huán)繞我只是文字但我不會(huì)環(huán)繞我只是文字但我不會(huì)環(huán)繞我只是文字但我不會(huì)環(huán)繞我只是文字但我不會(huì)環(huán)繞我只是文字但我不會(huì)環(huán)繞我只是文字但我不會(huì)環(huán)繞我只是文字但我不會(huì)環(huán)繞我只是文字但我不會(huì)環(huán)繞
    

正常情況下，如果一個(gè)塊級(jí)元素設(shè)置成了float，那么他的兄弟元素會(huì)環(huán)繞其布局。這里我們給.text加上overflow，文字所在的區(qū)域就產(chǎn)生了BFC，元素的左邊總是觸碰到容器的左邊，即使存在浮動(dòng)也是如此。

這里舉例了幾個(gè)比較經(jīng)典的應(yīng)用，我們?cè)谝院蟮牟季种幸部梢月剿髌渲械膴W秘之處，做一個(gè)能寫(xiě)一手好樣式還能懂原理的前端er。