如何理解CSS中BFC？

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

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 規范》

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