BFC

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

下面來看下：

BFC 又稱 Block Formatting Context （塊狀格式化上下文）

MDN 解釋：

A block formatting context is a part of a visual CSS rendering of a web page. It"s the region in which the layout of block boxes occurs and in which floats interact with other elements.

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

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

哪些方式會建立 BFC ？

透過以下方式，能建立一個 BFC 規範的佈局（根據我熟悉的程度簡單劃分幾類，如下）：

平時常用

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

不常用（table 系）

display: table-cell（table 單元格 cell 預設為此樣式）display: table-caption（table caption 預設為此樣式）display: table, table-row, table-row-group, table-header-group, table-footer-group

不常用

display: flow-root設定 contain: layout, content, paint 的元素column-count or column-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簡單來講就是解決邊距重疊問題的方案，別把他想的太複雜，就類似於浮動，怎麼清除浮動一樣，其實平常開發你自己經常碰到過，只不過沒有注意罷了。自己寫寫程式碼，手動操作一下就明白了。