你好，我是「前端雨爸」，希望我的回答對你有所幫助。

BFC

年前，正巧一次面試中被問到涉及到BFC概念，當然我回答：不知道。但其實我們平時的開發中，卻時刻在利用BFC特性在處理樣式問題。

下面來看下：

BFC又稱BlockFormattingContext（塊狀格式化上下文）

MDN解釋：

AblockformattingcontextisapartofavisualCSSrenderingofawebpage.It'stheregioninwhichthelayoutofblockboxesoccursandinwhichfloatsinteractwithotherelements.

好吧，我看了這段解釋也是似懂非懂。

大概意思是：BFC是CSS渲染頁面環節中的一部分。在塊級盒子布局的范圍中出現，并且它也影響著浮動元素和其他元素。

哪些方式會創建BFC？

通過以下方式，能創建一個BFC規范的布局（根據我熟悉的程度簡單劃分幾類，如下）：

平時常用

• 根元素是html
• 設置float的元素（脫離文檔流）
• position:absolute|fixed（脫離文檔流）
• block元素設置overflow（非visible，內容不被加工處理，直接顯示）
• display:inline-block
• display:flex|inline-flex
• display:grid|inline-grid

不常用（table系）

• display:table-cell（table單元格cell默認為此樣式）
• display:table-caption（tablecaption默認為此樣式）
• display:table,table-row,table-row-group,table-header-group,table-footer-group

不常用

• display:flow-root
• 設置contain:layout,content,paint的元素
• column-countorcolumn-width不為auto的元素（包括column-count:1）
• column-span:all

實際應用舉例（摘自MDN）

通過幾個例子，感性的理解下BFC在實際場景中的作用：

margin塌陷

首先我們知道當在相鄰的塊級元素的margin會發生合并現象（稱為：外邊距折疊）

通常會發生在：相鄰元素，父子元素margin接觸處，或者一個空的塊級元素。

注意到兩個div之間的margin邊距合并成了一個。

怎么解決？

為目標元素外新建一個父元素，并設置overflow:hidden屬性。

我們知道hidden會裁剪內容（而不是visiable），則父元素中的元素“們”的margin將“盡情釋放”在父元素中。

能看到margin的上下邊距被控制在新的父元素中了。

當然我想說：你也可以將當前元素設置為inline-block觸發BFC，只要符合規范都是可行的。

浮動元素丟失高度

我們知道設置浮動float屬性的元素將脫離文檔流，那么包裹浮動的父級元素的高度為其中非浮動的元素，甚至直接高度“塌陷”。

解決方式也很簡單，參考上面的margin邊距合并問題：我們也可以設置overflow來解決。

也可以設置display:flow-root;。

總結

簡單講了下css中BFC的概念。

并且通過幾個例子示范了如何處理元素間的常見問題（margin邊距合并、浮動高度丟失）。

當知道了BFC對元素之間的影響后，就能在頁面布局中更好的隔離，或者處理元素間的關系。

本文摘自我的文章《前端面試中的BFC規范》

如果覺得不錯，「前端雨爸」，讓我們一同在前端路上成長進步。