摘要：是指塊級(jí)元素，就是會(huì)強(qiáng)制換行的元素，比如。將元素推向左側(cè)。請(qǐng)根據(jù)不同的實(shí)際情況，選擇最合適的方式。再次重申一下，是為子元素創(chuàng)建定位環(huán)境。，由于浮動(dòng)元素占據(jù)了一定的寬度，新創(chuàng)建的會(huì)因此而變窄。這里只是為了更好地去理解而做一個(gè)例子。

W3C 為瀏覽器規(guī)定了三種定位模型：Normal Flow, 浮動(dòng), 和絕對(duì)定位。本文所介紹的 BFC (Block Formatting Model) 是屬于 Normal Flow 中的一小節(jié)內(nèi)容，并且這部分內(nèi)容只有三段話。第一段：

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with "overflow" other than "visible" (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

簡(jiǎn)單來(lái)說(shuō)，BFC 僅僅是一種定位的情況，即當(dāng)元素滿足 BFC 的條件時(shí)，瀏覽器怎么去顯示它。上面這短話講的是如何建立 BFC，只要滿足其中任何一個(gè)條件就可以了?？赡苄枰忉屢痪湓挘褪牵篵lock containers that are not block boxes。

block box 是指塊級(jí)元素，就是會(huì)強(qiáng)制換行的元素，比如 div。block container 是指可以包含塊級(jí)元素的元素，但它不一定要換行，比如 div, td。可以看到，后者的范圍更大一點(diǎn)，兩者異或的結(jié)果就是這句話的意思了。除了規(guī)范上列舉的 inline-block、table-cell 等，主流瀏覽器還支持 flex 。

默認(rèn)的 div 是塊級(jí)元素，并不是 BFC，所以需要一些額外的樣式來(lái)生成。按照規(guī)范，我們大概有如下（不止）的手段，以及相應(yīng)的代價(jià)：

disblay: table; 無(wú)法解決響應(yīng)式的問(wèn)題。

display: inline-block; 會(huì)使后續(xù)內(nèi)聯(lián)元素顯示在同一行。

position: absolute; 將元素從 normal flow 中剝離出來(lái)。

float: left; 將元素推向左側(cè)。

overflow: scroll; 會(huì)出現(xiàn)滾動(dòng)條。

overflow: hidden; 會(huì)截?cái)嘁绯龅膬?nèi)容。

請(qǐng)根據(jù)不同的實(shí)際情況，選擇最合適的方式。

仔細(xì)想一下，在 normal flow 的章節(jié)中寫(xiě)道，用 float: left; 或者 position: absolute; 去創(chuàng)建 BFC，是不是有點(diǎn)矛盾？不然。BFC 指的是為子元素創(chuàng)建一個(gè)定位環(huán)境，浮動(dòng)和絕對(duì)定位是針對(duì)該元素本身，而不是其子元素。

在 normal flow 中，我們知道，垂直方向上相鄰元素的外邊距取兩者中較大的值，例子：

  
第一塊
  
第二塊
  
第三塊

相應(yīng)的 CSS：

.container {margin:20px;border:1px solid #212121;width:300px;background-color:#009688;}
.c1 {margin:10px 0;height:40px;background-color:#FFC107;}

結(jié)果示意圖：

可以看到，每個(gè)黃色塊之間的距離是 10px，而不是相加的 20px 。擴(kuò)展一下，如果用 .c1 {margin:10px 0 15px;} 那么黃色塊之間的距離就是 15px，取較大值。如果是 .c1 {margin:10px 0 -15px;} 呢？是 10px，還是 0px，還是 -5px？

關(guān)于邊距合并，規(guī)范中是這么描述的：

Vertical margins between adjacent block-level boxes in a block formatting context collapse.

也就是說(shuō)，邊距合并的條件是，子元素處于相同的 BFC 中，如果為其中一個(gè)子元素創(chuàng)建新的 BFC，就不會(huì)發(fā)生合并的情況了。

    
第三塊

現(xiàn)在為第三塊添加一個(gè)額外的父元素，并且為該元素創(chuàng)建 BFC:

.extra {overflow:hidden;}

圖不多帶帶給了，這里給個(gè)問(wèn)題，就是，如果不添加父元素，直接把 .extra 類加給第三個(gè)塊，如下：

第一塊
第二塊
第三塊

可以防止邊距合并嗎？不行。再次重申一下，BFC 是為子元素創(chuàng)建定位環(huán)境。

如果一個(gè)塊級(jí)元素的所有子元素都浮動(dòng)了，那么它的高度就為 0 。

.c1 {float:left;margin:10px;width:100px;height:50px;background-color:#FFC107;}

對(duì)于同樣的 html，修改 .c1的樣式，添加浮動(dòng)的效果，可以看到

父元素只剩下了邊框，并沒(méi)有 content height 。如果要清除浮動(dòng)，可以為容器添加偽類：

.container:after{display:block;content:"";clear:both;}

這樣，父元素的高度就又回來(lái)了。

當(dāng)然，我們也可以為父元素添加 overflow:hidden; 來(lái)清除浮動(dòng)。

.container {overflow:hidden;}

這兩個(gè)方法都可行，前者很直白，clear:both; 本來(lái)就是用于清除浮動(dòng)的，為什么用 overflow:hidden 也可以？因?yàn)檫@樣就創(chuàng)建了一個(gè) BFC，對(duì)于子元素的排列，規(guī)范是這么寫(xiě)的：

In a block formatting context, each box"s left outer edge touches the left edge of the containing block. This is true even in the presence of floats, unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

子元素的外邊緣會(huì)觸碰到父元素的左側(cè)（嚴(yán)格來(lái)說(shuō)是，子元素外邊距和父元素的內(nèi)邊距）。如果父元素的高度為 0，那么就違背規(guī)范了。

所以為父元素添加浮動(dòng)、絕對(duì)定位等任何用于創(chuàng)建 BFC 的方式，都可以清除浮動(dòng)。

常見(jiàn)的一種布局就是，特別是評(píng)論回復(fù)中，會(huì)看到在頭像右側(cè)有一段文字，就算文字很長(zhǎng)，也不會(huì)出現(xiàn)在頭像下方，會(huì)一直保持在右側(cè)。

這樣的 HTML 格式很簡(jiǎn)單：

  

  
...

.comment 中的內(nèi)容省略不寫(xiě)了。如果僅僅對(duì) .avatar 左浮，就會(huì)出現(xiàn)文字環(huán)繞現(xiàn)象：

解決的辦法可以是為 .comment 添加一個(gè)適當(dāng)?shù)淖笸膺吘?，比?90px 。

另一個(gè)辦法是利用 BFC 。

根據(jù)規(guī)范，子元素的外邊距必須向左靠著父元素的內(nèi)邊距，也就是說(shuō)，盡管 .avatar 浮動(dòng)了，但是 .comment 還是會(huì)靠著父元素的左側(cè)內(nèi)邊距，它們兩者是上下重疊的！

unless the box establishes a new block formatting context，這句話表明，只要為 .comment 創(chuàng)建 BFC，那么這個(gè)約束就可以被打破，即它們不會(huì)重疊。

in which case the box itself may become narrower due to the floats，由于浮動(dòng)元素占據(jù)了一定的寬度，新創(chuàng)建的 BFC 會(huì)因此而變窄。

.avatar {width:70px;height:70px;float:left;margin:10px;background-color:#ffc107;}
.comment {overflow:hidden;}

一般來(lái)說(shuō)，如果要做寬度自適應(yīng)的多列布局，就會(huì)用百分比做寬度單位，并且子元素浮動(dòng)。那么問(wèn)題就是，如果百分比換算到像素時(shí)，一旦子元素的寬度之和大于父元素，最后一列就會(huì)換行。

CSS3 本身可以實(shí)現(xiàn)多列布局，用 columns 屬性或者 flex 布局。這里只是為了更好地去理解 BFC 而做一個(gè)例子。

.column {float:left;margin:0 1%;width:31.33%;height:100px;background-color:#ffc107;}

先來(lái)算一下，左右邊距各 1%，寬度 31.33%，三列布局，總共 99.99%，應(yīng)該不會(huì)超。但對(duì)于部分瀏覽器，寬度換算時(shí)是四舍五入的，比如，父元素的寬度為 500px，那么四舍五入，每列寬度為 157px，左右邊距 5px，總和 (157 + 5 2) 3 = 501，正好超 1px，最后一列換行。

最后一列要換行是因?yàn)楦?dòng)元素的特性，如果它不是浮動(dòng)元素，那么就可以按照 normal flow 的規(guī)則來(lái)，即，向左靠至父元素左邊距。

然后，根據(jù)上個(gè)小節(jié)的知識(shí)，如果為元素創(chuàng)建新的 BFC，那么“向左靠”的規(guī)則可以打破。兩個(gè)條件結(jié)合，得到：

.column:last-child {float:none;overflow:hidden;}

雖然可以防止換行，但是最后一列的間距有點(diǎn)不一致。

本文主要是講了 BFC 的兩個(gè)關(guān)鍵點(diǎn)，第一：如何創(chuàng)建，以及每種方式的代價(jià)；第二：特性，防止默認(rèn)的邊距合并和向左靠至父元素內(nèi)側(cè)。很多衍生用法都是基于這兩種特性來(lái)的。

不過(guò)，往往我們是直接去記用 overflow:hidden; 可以清除浮動(dòng)，并沒(méi)有想為什么，畢竟內(nèi)容不多。有時(shí)候想想原理，也挺有意思的。