1.BFC(Block Formatting Context)是Web頁面中盒模型布局的CSS渲染模式。它的定位體系屬于常規(guī)文檔流

2.創(chuàng)建一個BFC

一個新的BFC可以通過給容器添加任何一個觸發(fā)BFC的CSS樣式，如overflow: scroll, overflow: hidden, display: flex, float: left,或者 display: table來創(chuàng)建

所以每當(dāng)想要創(chuàng)建一個新的BFC的時候，我們會基于我們的需求選擇最好的樣式條件。為了一致性，我在這篇文章所給出的例子中全部使用了overflow: hidden

3.BFC中的盒子對齊

簡單來說，在上圖中我們可以看到，所有屬于同一個BFC的盒子都左對齊（左至右的格式），他們的左外邊框緊貼著包含塊的左邊框。在最后一個盒子里我們可以看到盡管那里有一個浮動元素（棕色）在它的左邊，另一個元素（綠色）仍然緊貼著包含塊的左邊框。除非在父元素內(nèi)部再創(chuàng)建一個BFC的子元素，這時由于浮動的影響，子盒子本身會變得更窄。關(guān)于為什么會發(fā)生這種情況的原理將會在下面的文字環(huán)繞部分進(jìn)行討論

4.BFC導(dǎo)致的外邊距折疊

在常規(guī)文檔流中，盒子都是從包含塊的頂部開始一個接著一個垂直堆放。兩個兄弟盒子之間的垂直距離是由他們個體的外邊距所決定的，但不是他們的兩個外邊距之和

為了去理解它，讓我們來思考一下下面這個例子

在上圖中我們看到在紅色盒子（一個div）中包含兩個綠色的兄弟元素（p元素），一個BFC已經(jīng)被創(chuàng)建

理論上兩個兄弟元素之間的邊距應(yīng)該是來兩個元素的邊距之和（20px），但它實際上為10px。這就是被稱為外邊距折疊。當(dāng)兄弟元素的外邊距不一樣時，將以最大的那個外邊距為準(zhǔn)

5.使用BFC來防止外邊距折疊

這一開始聽起來可能有些困惑，因為我們在前面討論了BFC導(dǎo)致外邊距折疊的問題。但我們必須牢記在心的是毗鄰塊盒子的垂直外邊距折疊只有他們是在同一BFC時才會發(fā)生。如果他們屬于不同的BFC，他們之間的外邊距將不會折疊。所以通過創(chuàng)建一個新的BFC我們可以防止外邊距折疊

結(jié)果將會和上面的一樣。即，這將會有一個折疊，三個兄弟元素將會以垂直距離為10px的距離分開。會這樣是因為三個p標(biāo)簽都是屬于同一個BFC

6.使用BFC來包含浮動

一個BFC元素是可以包含浮動元素的。很多時候我們會碰到這種情況，一個容器里有浮動元素。由于這個原因，容器元素沒有高度，它的浮動孩子將會脫離頁面的常規(guī)流。我們通常使用清除浮動來解決這個問題，最受歡迎的方法是使用一個clearfix的偽類元素。但我們同樣可以通過定義一個BFC來達(dá)到這個目的

讓我們來看看一個例子：

在上面的這個案例中，父容器將不會有任何的高度，它將不會包含已經(jīng)浮動的子元素。為了解決這個問題，我們通過添加overflow: hidden，在容器中創(chuàng)建一個新的BFC。經(jīng)過修改過的CSS為

7.使用BFC來防止文字環(huán)繞

有時候一個浮動div周圍的文字環(huán)繞著它（如下圖中的左圖所示）但是在某些案例中這并不是可取的，我們想要的是外觀跟下圖中的右圖一樣的。為了解決這個問題，我們可能使用外邊距，但是我們也可以使用一個BFC來解決

首先讓我們理解文字為什么會環(huán)繞。為此我們需要知道當(dāng)一個元素浮動時盒子模型是如何工作的。這就是我之前在討論BFC對齊時留下的那部分。讓我們從下圖來了解發(fā)生了什么

圖中的HTML可以假定為這樣

在上圖中的整個黑色區(qū)域為p元素。正如我們所看到的，這個p元素并沒有移動，但是它卻出現(xiàn)在浮動元素的下方。p元素的line boxes（指的是文本行）進(jìn)行了移位。此處line boxes的水平收縮為浮動元素提供了空間

隨著文字的增加，而line boxes不再需要移位，最終將會環(huán)繞在浮動元素的下方，因此出現(xiàn)了那樣的情況。這就解釋了為什么即使在浮動元素存在時，段落也將緊貼在包含塊的左邊框上，還有為什么line boxes會縮小以容納浮動元素

如果我們能夠移動整個p元素，那么這個環(huán)繞的問題就可以解決了

在去解決之前，讓我們再回憶一下W3C標(biāo)準(zhǔn)上是怎么描述的

根據(jù)這些，如果給這個p元素創(chuàng)建了一個新的BFC，那么它將不會緊挨著容器塊的左邊緣。這個可以通過簡單的給p元素添加overflow: hidden來實現(xiàn)。這個方法創(chuàng)建了一個新的BFC解決了文字環(huán)繞在浮動元素周圍的問題

8.在多列布局中使用BFC

如果我們正在創(chuàng)建的一個多列布局占滿了整個容器的寬度，在某些瀏覽器中最后一列有時候?qū)粩D到下一行。會發(fā)生這樣可能是因為瀏覽器舍入（取整）了列的寬度使得總和的寬度超過了容器的寬度。然而，如果我們在一個列的布局中建立了一個新的BFC，它將會在前一列填充完之后的后面占據(jù)所剩余的空間

讓我們使用多列布局中的三列布局來作為例子

現(xiàn)在即使容器的寬度會有輕微的變化，但是布局也不會中斷。當(dāng)然，這并不是多列布局的最好選擇，但它是防止最后一列下滑問題的一種方法。Flexbox在這種情況下可能是一個更好的解決方案，但是這應(yīng)該要說明一下在這些情況下元素是如何表現(xiàn)的

總結(jié)

以上是生活随笔為你收集整理的CSS之BFC的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。