BFC（Block Formatting Context）直譯為“塊級(jí)格式化范圍”业栅。

是?W3C CSS 2.1?規(guī)范中的一個(gè)概念，它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位征懈，以及與其他元素的關(guān)系和相互作用。當(dāng)涉及到可視化布局的時(shí)候，Block Formatting Context提供了一個(gè)環(huán)境篮幢，HTML元素在這個(gè)環(huán)境中按照一定規(guī)則進(jìn)行布局。一個(gè)環(huán)境中的元素不會(huì)影響到其它環(huán)境中的布局为迈。比如浮動(dòng)元素會(huì)形成BFC三椿，浮動(dòng)元素內(nèi)部子元素的主要受該浮動(dòng)元素影響，兩個(gè)浮動(dòng)元素之間是互不影響的葫辐。這里有點(diǎn)類似一個(gè)BFC就是一個(gè)獨(dú)立的行政單位的意思搜锰。也可以說(shuō)BFC就是一個(gè)作用范圍」⒄剑可以把它理解成是一個(gè)獨(dú)立的容器蛋叼，并且這個(gè)容器的里box的布局，與這個(gè)容器外的毫不相干剂陡。

另一個(gè)通俗點(diǎn)的解釋是：在普通流中的?Box(框)?屬于一種?formatting context(格式化上下文)?狈涮，類型可以是?block?，或者是?inline鸭栖，但不能同時(shí)屬于這兩者歌馍。并且，?Block boxes(塊框)?在?block formatting context(塊格式化上下文)?里格式化晕鹊，?Inline boxes(塊內(nèi)框)?則在?inline formatting context(行內(nèi)格式化上下文)?里格式化松却。任何被渲染的元素都屬于一個(gè)?box?，并且不是?block?捏题，就是inline?玻褪。即使是未被任何元素包裹的文本，根據(jù)不同的情況公荧，也會(huì)屬于匿名的?block boxes?或者?inline boxes带射。所以上面的描述，即是把所有的元素劃分到對(duì)應(yīng)的?formatting context?里循狰。

其一般表現(xiàn)規(guī)則窟社，我整理了以下這幾個(gè)情況：

1、在創(chuàng)建了?Block Formatting Context?的元素中绪钥，其子元素按文檔流一個(gè)接一個(gè)地放置灿里。垂直方向上他們的起點(diǎn)是一個(gè)包含塊的頂部，兩個(gè)相鄰的元素之間的垂直距離取決于 ‘margin’ 特性程腹。

?根據(jù)?CSS 2.1?8.3.1 Collapsing margins第一條匣吊，兩個(gè)相鄰的普通流中的塊框在垂直位置的空白邊會(huì)發(fā)生折疊現(xiàn)象。也就是處于同一個(gè)BFC中的兩個(gè)垂直窗口的margin會(huì)重疊。

?根據(jù)?CSS 2.1?8.3.1 Collapsing margins第三條色鸳，生成?block formatting context?的元素不會(huì)和在流中的子元素發(fā)生空白邊折疊社痛。所以解決這種問(wèn)題的辦法是要為兩個(gè)容器添加具有BFC的包裹容器。

2命雀、在?Block Formatting Context?中蒜哀，每一個(gè)元素左外邊與包含塊的左邊相接觸（對(duì)于從右到左的格式化，右外邊接觸右邊）吏砂， 即使存在浮動(dòng)也是如此（盡管一個(gè)元素的內(nèi)容區(qū)域會(huì)由于浮動(dòng)而壓縮）撵儿，除非這個(gè)元素也創(chuàng)建了一個(gè)新的?Block Formatting Context?。

3狐血、Block Formatting Context就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器淀歇，容器里面的子元素不會(huì)在布局上影響到外面的元素，反之也是如此氛雪。

4房匆、根據(jù)?CSS 2.1 9.5 Floats?中的描述，創(chuàng)建了?Block Formatting Context?的元素不能與浮動(dòng)元素重疊报亩。

?表格的?border-box浴鸿、塊級(jí)的替換元素、或是在普通流中創(chuàng)建了新的?block formatting context（如元素的?'overflow'?特性不為'visible'?時(shí)）的元素不可以與位于相同的?block formatting context?中的浮動(dòng)元素相重疊弦追。

5岳链、當(dāng)容器有足夠的剩余空間容納?BFC?的寬度時(shí)，所有瀏覽器都會(huì)將?BFC?放置在浮動(dòng)元素所在行的剩余空間內(nèi)劲件。?

6掸哑、 在?IE6 IE7 IE8 Chrome Opera?中，當(dāng)?BFC?的寬度介于?"容器剩余寬度"?與?"容器寬度"?之間時(shí)零远，BFC?會(huì)顯示在浮動(dòng)元素的下一行苗分；在?Safari?中，BFC?則仍然保持顯示在浮動(dòng)元素所在行牵辣，并且?BFC?溢出容器摔癣；在?Firefox?中，當(dāng)容器本身也創(chuàng)建了?BFC?或者容器的?'padding-top'纬向、'border-top-width'?這些特性不都為?0?時(shí)表現(xiàn)與?IE8(S)择浊、Chrome?類似，否則表現(xiàn)與?Safari?類似逾条。?

經(jīng)驗(yàn)證琢岩，最新版本的瀏覽中只有firefox會(huì)在同一行顯示，其它瀏覽器均換行师脂。

7担孔、 在?IE6 IE7 IE8 Opera?中江锨，當(dāng)?BFC?的寬度大于?"容器寬度"?時(shí)，BFC?會(huì)顯示在浮動(dòng)元素的下一行攒磨；在?Chrome Safari?中泳桦，BFC?則仍然保持顯示在浮動(dòng)元素所在行汤徽，并且?BFC?溢出容器娩缰；在?Firefox?中，當(dāng)容器本身也創(chuàng)建了?BFC?或者容器的?'padding- top'谒府、'border-top-width'?這些特性不都為?0?時(shí)表現(xiàn)與?IE8(S)?類似拼坎，否則表現(xiàn)與?Chrome?類似。

經(jīng)驗(yàn)證完疫，最新版本的瀏覽中只有firefox會(huì)在同一行顯示泰鸡，其它瀏覽器均換行。

8壳鹤、根據(jù)CSS2.1?規(guī)范第10.6.7部分的高度計(jì)算規(guī)則盛龄，在計(jì)算生成了?block formatting context?的元素的高度時(shí)，其浮動(dòng)子元素應(yīng)該參與計(jì)算芳誓。