BFC 的概念始于 CSS2，是個蠻古老的 CSS 話題了，網(wǎng)上也到處能搜到 BFC 的介紹，但是都不夠簡潔。本文系翻譯自 Rachel Andrew 女士的博文Understanding CSS Layout And The Block Formatting Context ，內(nèi)容足夠簡潔明了。

本文的目的是介紹一些概念，來幫你增強(qiáng) CSS 碼力。如標(biāo)題所示，這篇文章主要是講 塊級格式上下文（BFC，Block Formatting Context） 。你可能沒聽過這個術(shù)語，但只要你曾經(jīng)使用 過CSS 布局，你就能明白它。理解 BFC 是什么、它如何工作、如何創(chuàng)建一個 BFC 是非常有用的，這些能幫你更好的理解 CSS 布局。

這篇文章里，我會通過幾個你會很熟悉的的示例解釋 BFC。我還會告訴你一個新的 display 值，當(dāng)你理解了 BFC 后可能會很需要這個值。

什么是 BFC

一個簡單的浮動的示例就能明白 BFC 的行為，在下面的示例中我們創(chuàng)建一個 box 元素，該元素包裹一段文字和一個浮動的圖片。 如果文字內(nèi)容多的話文字將環(huán)繞著整個浮動圖片，box 的邊框會把他們整個包裹起來。

<div class="outer">
	<div class="float">I am a floated element.</div>
	I am text inside the outer box.
</div>

.outer {
      border: 5px dotted rgb(214,129,137);
      border-radius: 5px;
      width: 450px;
      padding: 10px;
      margin-bottom: 40px;
}

.float {
      padding: 10px;
      border: 5px solid rgba(214,129,137,.4);
      border-radius: 5px;
      background-color: rgba(233,78,119,.4);
      color: #fff;
      float: left;  
      width: 200px;
      margin: 0 20px 0 0;
}

文字環(huán)繞著浮動元素

但如果把一些文字刪除，就沒有足夠的文字去環(huán)繞圖片（浮動元素）了，同時由于浮動元素脫離文檔流，box 元素的邊框高度就會隨文字的減少而降低。

沒有足夠的文字，box 元素邊框的高度就會低于浮動元素的高度

之所以會發(fā)生這種情況是由于當(dāng)我們浮動一個元素后，box 元素仍然保持原來的寬度，是文字所占的空間縮短了以給浮動元素騰出位置，這就是為什么背景和邊框能夠看起來包裹住了浮動元素。

我們通常會使用兩種不同的方式來解決這個問題，一種是使用clear hack，就是在 文字和圖片的下方插入一個 div 并將它的 CSS clear 屬性設(shè)值為 both 。另外一種方法是使用 overflow 屬性 ，把它設(shè)值成非默認(rèn)值 visible 的值。

.outer {
      overflow: auto;
}

用 overflow: auto 后 box 就能包裹浮動元素了

overflow 之所以能夠有效是因?yàn)楫?dāng)它的是是非 visible 時會創(chuàng)建一個 BFC，而 BFC 的功能之一就是 包裹浮動元素 。

BFC 是布局中的迷你布局

你可以把 BFC 當(dāng)做你頁面中的一塊小布局，當(dāng)一個元素被創(chuàng)建成 BFC 后，它其中的所有元素都會被它包裹。正如我們所見，當(dāng) box 元素變成 BFC 后，它其中的浮動元素就再也沒能突破它的底部。除此之外，BFC 還有一些有用的功能。

BFC 可以阻擋外邊距疊加（margins collapsing）

理解外邊距疊加是另外一個被低估的 CSS 技巧。在接下來的示例里，我創(chuàng)建了一個背景灰色的 div，這個 div 含有兩個段落，div 元素的 margin-bottom 為 40px，同時每個段落都有 20px 的 margin-top 與 margin-bottom。

.outer {
       background-color: #ccc;
      margin: 0 0 40px 0;
}

p {
      padding: 0;
      margin: 20px 0 20px 0;
      background-color: rgb(233,78,119);
      color: #fff;
}

由于 p 元素的邊緣與 outer 元素的邊緣之間沒有任何東西，所以 outer 與 p 的 margin 會疊加，p 會與 outer 的頂部與底部齊平，p 對外的 margin 似乎與 outer 的 margin 合并了，使我們無法在段落的上下看到 outer 的灰色背景。

由于 margin collapse（外邊距疊加），我們看到 outer 內(nèi)部上下沒有灰色背景

如果我們把 outer 元素變成 BFC，它就可以包裹住 p 以及 p 的 margin，外邊距不會發(fā)生疊加，outer 元素內(nèi)部就會出現(xiàn)由 p 元素的 margin 頂出來的上下灰色背景。

.outer {
       background-color: #ccc;
      margin: 0 0 40px 0;
      overflow: auto;
}

建立 BFC 后，外邊距不再疊加

一旦 BFC 建立，它就會阻止它內(nèi)部的元素逃離突破它。

一個 BFC 會停止去環(huán)繞浮動元素

你可能很熟悉 BFC 的這個特性，我們在有浮動元素的列類型布局中常用到。如果一個元素創(chuàng)建了 BFC，它就不會去環(huán)繞（或者說包裝？）任何浮動元素。看下面這個示例：

<div class="outer">
      <div class="float">I am a floated element.</div>
      <div class="text">I am text</div>
</div>

class 名為 float 的元素將會浮動在布局的左側(cè)，class 名為 text 的 div 元素將會在它后面并環(huán)繞它。

文字環(huán)繞著浮動元素

我們可以通過給 text 元素建立 BFC 來阻擋這種環(huán)繞行為。

.text {
      overflow: auto;
}

text 元素建立 BFC 后就不再環(huán)繞浮動元素了

該方法也是我們創(chuàng)建浮動布局的基本方式。還需注意的是浮動一個元素時也會給該元素創(chuàng)建 BFC，也就是說此時 .float 與 .text 都是 BFC，這也是無論右側(cè)高度低于還是高于左側(cè)兩者都不會互相圍繞的原因。

創(chuàng)建一個 BFC 的常用方式

除了使用 overflow 外， 一些其他的 CSS 屬性也可以創(chuàng)建 BFC，比如上面我們所見，浮動一個元素也可以為該元素創(chuàng)建 BFC，浮動元素會包裹它內(nèi)部的所有元素。還有以下幾種方式可以創(chuàng)建 BFC：

使用 position: absolute 或者 position： fixed 。

使用 display: inline-block 、 display: table-cell 或者 display: table-caption ，其中 table-cell 和 table-caption 是表格相關(guān) HTML 元素的對應(yīng)默認(rèn) CSS 值，所以當(dāng)你創(chuàng)建表格每個表格單元都會自動創(chuàng)建 BFC。

另外當(dāng)使用 multi-column layout （多列布局）時使用 colum-span: all 也可以創(chuàng)建 BFC。Flex（彈性） 和 Grid（網(wǎng)格） 布局中的元素也會自動創(chuàng)建類似 BFC 的機(jī)制，只是它們被稱為 Flex Formatting Context（彈性格式上下文）和 Grid Formatting Context(網(wǎng)格格式上下文)。這反映了它們所參與的布局類型。一個 Block Formatting Context（塊級格式上下文）表明他內(nèi)部的元素參與了塊級布局，一個 彈性格式上下文意味著它內(nèi)部的元素參與了彈性布局。在實(shí)踐中，這幾種布局的結(jié)果是相似的，浮動元素會被包裹、外邊距不會疊加。

創(chuàng)建 BFC 的新方式

使用 overflow 或其他的方法創(chuàng)建 BFC 時會有兩個問題。第一個是這些方法本身是有自身的設(shè)計目的的，所以在使用它們創(chuàng)建 BFC 時會可能產(chǎn)生副作用。例如使用 overflow 創(chuàng)建 BFC 后在某些情況下你可能會看到出現(xiàn)一個滾動條或者元素內(nèi)容被削減。這是由于 overflow 屬性是設(shè)計被用來讓你告訴瀏覽器如何定義元素的溢出狀態(tài)的。瀏覽器執(zhí)行了它最基本的定義。

另一個問題是，即使在沒有出現(xiàn)副作用的情況下，使用 overflow 也可能會使另一個開發(fā)人員感到困惑。他們可能會各種猜想：這里為啥要把 overflow 的值設(shè)為 auto 或 scroll？原開發(fā)人員做這個意義何在？原開發(fā)人員是想讓這里出現(xiàn)滾動條嗎？

最安全的做法應(yīng)該是創(chuàng)建一個 BFC 時不會有任何副作用，它內(nèi)部的元素都安安全全的呆在這個小布局里，這種方法不會引起任何意想不到的問題，也可以讓開發(fā)者意圖清晰。CSS 工作組也十分認(rèn)同這種想法，所以他們定制了一個新的屬性值： display: flow-root 。

你可以使用 display: flow-root 安全的創(chuàng)建 BFC 來解決本文中提到的各種問題，包括：包裹浮動元素、阻止外邊距疊加、阻止環(huán)繞浮動元素。

caniuse 上 display: flow-root 各瀏覽器支持情況

瀏覽器對該屬性值的支持目前還是有限的，如果你覺得這個屬性值很方便，請投票去讓 Edge 也支持它。不過無論如何，你現(xiàn)在應(yīng)該已經(jīng)理解了什么是 BFC，以及如何使用 overflow 或其他方法來包裹浮動，以及知道了 BFC 可以阻止元素去環(huán)繞浮動元素，如果你想使用彈性或網(wǎng)格布局可以在一些不支持他們的瀏覽器中使用 BFC 的這些特性做降級處理。

理解瀏覽器如何布置網(wǎng)頁是非?；A(chǔ)的。 雖然有時看起來無關(guān)緊要，但是這些小知識可以加快創(chuàng)建和調(diào)試 CSS 布局所需的時間。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論