CSS是web前端中的重要內容，很多初學者在學習CSS時都會遇到各種各樣的問題，今天就給大家分享web前端開發如何理解CSS不懼和塊級格式化上下文。也許你從未聽說過這個術語，但是如果你曾經用 CSS 做過布局，那么你也許知道它是什么。理解什么是 BFC ，它為什么會起作用以及如何創建一個有用的 BFC 可以幫助你理解 CSS 布局是怎樣工作的。

什么是BFC?

最容易明白一個 BFC 表現的是一個浮動的例子。在下面的例子中有一個盒模型，其中包含一張左浮動的圖和一些文字。如果我們有大量的文字，它環繞在浮動的圖像上，則邊框會圍繞著整個區域。

I am a floated element.I am text inside the outer box..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;}

圖1：文本環繞著浮動元素

如果刪除了一些文本，那么文本就不足以環繞圖像，并且因為圖片浮動脫離了文檔流，邊框就會在圖片下面并且上升到文本的高度。

圖2：沒有足夠的文本，邊框就不能到達浮動元素所期望的高度

這是因為當我們在浮動一個元素時，文本所在的盒模型仍然是固定的高度，而因浮動元素而縮短的空間是文本的行框。這就是為什么背景和邊框會出現在浮動元素的后面。

這里有兩種我們通常修復這種問題的方式。一種是使用清除浮動 clearfix hack[1]，它是通過在文本和圖片下面插入一個元素并且設置清除兩側浮動來起作用的。另一種方式是使用 overflow屬性，使用其他的值來代替默認的 visible 。

.outer {overflow: auto;}

圖3：使用 overflow:auto 使盒模型中包含浮動

overflow 屬性起作用的原因是使用任何一個其他值來代替初始值 visible ，從而創建一個BFC。即 BFC 的一個特點就是它包含浮動。

BFC 布局是一個迷你布局

你可以認為 BFC 在網頁中是一個迷你布局。一旦一個元素創建的 BFC ，所有東西都包含在里面了。正如我們所看到的，它包含浮動元素使其不再超出盒子底部。同時 BFC 也產生了一些其他有用的行為。

BFC 防止外邊距塌陷

理解外邊距塌陷是另一個被低估的 CSS 技能。在下一個例子中，有一個灰色背景的 div 。這個 div 中有兩個段落。外層 div 有 40px 的下邊距;每一個段落也分別有 20px 的上下邊距。

.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 元素的外邊距和外層 div 的外邊距之間沒有任何東西而導致它們折疊，使 p 段落最后會與盒子的頂部和底部平齊。所以在 p 段落的上面和下面我們沒有看到任何灰色。

圖4：外邊距塌陷導致在盒子的頂部和底部看不到任何灰色

如果我們對盒模型應用 BFC ，那么它將包括段落和邊距并使之不會塌陷，所以我們將在邊距的后面看到灰色的背景。

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

圖5：使用BFC外邊距將不會塌陷

BFC 再一次使元素包含在其中，阻止其外邊距塌陷或超出盒模型。

BFC 阻止內容環繞浮動元素

你也會熟悉 BFC 這種行為，就是它如何在使用浮動的多列布局中工作的。如果一個項目創建了 BFC ，那么它將不會環繞任何浮動元素，比如在下面的示例中有這樣的標記：

I am a floated element.I am text

帶有 float 類的元素開始浮動，然后 div 中的文本會環繞在浮動元素周圍。

圖6：文本環繞浮動元素

那么可以使用通過對文本使用 BFC 來阻止其環繞行為。

.text {overflow: auto;}

圖7：div 包含的文本使用了 BFC 使之停止環繞

這是我們創建多列浮動布局常用的方式。浮動一個元素同時也為另一個元素創建了 BFC ，所以當右邊的元素比左邊高時，創建的列也不再嘗試環繞對方。

還有什么方式可以創建 BFC?

除了使用 overflow 屬性以外，其他一些 CSS 屬性也可以創建 BFC 。正如我們看到的，浮動一個元素也創建了 BFC ，所以浮動項目將包含里面的任何元素。

其他方式還有使用 position: absolute ，position: fixed ，使用 display: inline-block ， display: table-cell 及 display: table-caption ，其中 table-cell 以及 table-captions 是 HTML 元素的默認屬性，所以如果有一個 table 數據，那么它的每個格子都將創建 BFC 。 column-span: all 多被使用在多列布局中。

Flex 和 Grid 項目也會創建類似的 BFC ，它們分別被描述為 Flex 格式化上下文和 Grid 格式化上下文，這分別反映了不同的布局類型。 BFC 表示塊級布局， FFC 代表 Flex 布局。在實際項目中結果是一樣的，都是包含浮動并且外邊距不會發生塌陷。

創建 BFC 新方式

使用 overflow 屬性或其他方式創建 BFC 有兩個問題。第一，這些方法對于它們真正的用途會產生副作用。使用 overflow 屬性創建一個 BFC 并且包含浮動，但是在某些情況下你可能會發現得到一個了不必要的滾動條，或者陰影被剪掉了。這是由于 overflow 屬性本質上是告訴瀏覽器在溢出的情況下應該怎樣做—產生滾動條或者剪掉元素。瀏覽器實際上做了你讓它做的工作!

即使在沒有任何副作用的情況下，使用 overflow 屬性也可能會讓另一個開發人員感到困惑。為什么 overflow 屬性設置為自動或滾動?開發者最初的目的是什么?他們希望在這個組件上使用滾動條嗎?怎樣創建一個 BFC 是行之有效的?應該是沒有造成其他行為而創造出迷你的布局， 或者保證是在安全范圍內的，它將不會引發任何意想不到的問題，并且開發人員的意圖也很清晰。

CSS 工作組認為有一個很方便的新的 display 屬性: flow-root 。

你可以在任何情況下使用 display: flow-root ，它將會創建一個新的有用的 BFC ，它包含浮動，阻止外邊距塌陷，并且阻止元素環繞浮動。

你可以在下面的 CodePen 中看到上述所有的這些， 如果你的瀏覽器支持 display: flow-root 的話，如目前流行的火狐或谷歌瀏覽器。

圖8：支持 display: flow-root 屬性的瀏覽器

支持這個屬性的瀏覽器是有限的，但如果你認為這將是方便的，你可以去支持它。然而，即使目前你不能夠在你的代碼很流利的使用 flow-root 功能，但你現在明白了 BFC 是什么，以及當你使用 overflow 屬性或其它方法包含浮動的時候你明白了你在做什么。了解這樣一個事實：比如 BFC 將阻止元素環繞浮動，這在不支持的瀏覽器中想創建 Flex 或 Grid 布局的時候都是非常有用的。

你已經了解了一些關于瀏覽器如何布置 Web 頁面的基本原理，這看起來似乎無關緊要，但卻可以加快創建和調試 CSS 布局的時間。關注“武漢千鋒”公眾號，可以獲取更多web前端學習資料。

總結

以上是生活随笔為你收集整理的一个div 上下两行_web前端工程师如何理解 CSS 布局和块级格式化上下文的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。