BFC概念及觸發條件 · 前端

**塊格式化上下文（Block Formatting Context，BFC）**?是Web頁面的可視CSS渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素交互的區域。下列方式會創建**塊格式化上下文**： * 根元素（`<html>）` * 浮動元素（元素的[`float`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/float "此頁面仍未被本地化, 期待您的翻譯!")不是?`none`） * 絕對定位元素（元素的?[`position`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position "CSS position屬性用于指定一個元素在文檔中的定位方式。top，right，bottom 和?left 屬性則決定了該元素的最終位置。")為?`absolute`?或?`fixed`） * 行內塊元素（元素的?[`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display "在 CSS 規范（特指 CSS Level 1/2/3 規范）中查閱 display 屬性的所有取值時需要注意：個別取值的詳細信息記錄在獨立的規范中。例如，display: flex 的詳細信息在 CSS Flexible Box Model 規范中記錄。可以在本文檔末尾的表格中查看所有有關的規范。")?為?`inline-block`） * 表格單元格（元素的?[`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display "在 CSS 規范（特指 CSS Level 1/2/3 規范）中查閱 display 屬性的所有取值時需要注意：個別取值的詳細信息記錄在獨立的規范中。例如，display: flex 的詳細信息在 CSS Flexible Box Model 規范中記錄。可以在本文檔末尾的表格中查看所有有關的規范。")為?`table-cell`，HTML表格單元格默認為該值） * 表格標題（元素的?[`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display "在 CSS 規范（特指 CSS Level 1/2/3 規范）中查閱 display 屬性的所有取值時需要注意：個別取值的詳細信息記錄在獨立的規范中。例如，display: flex 的詳細信息在 CSS Flexible Box Model 規范中記錄。可以在本文檔末尾的表格中查看所有有關的規范。")?為?`table-caption`，HTML表格標題默認為該值） * 匿名表格單元格元素（元素的?[`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display "在 CSS 規范（特指 CSS Level 1/2/3 規范）中查閱 display 屬性的所有取值時需要注意：個別取值的詳細信息記錄在獨立的規范中。例如，display: flex 的詳細信息在 CSS Flexible Box Model 規范中記錄。可以在本文檔末尾的表格中查看所有有關的規范。")為?`table、``table-row`、?`table-row-group、``table-header-group、``table-footer-group`（分別是HTML table、row、tbody、thead、tfoot 的默認屬性）或?`inline-table`） * [`overflow`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow "CSS屬性?overflow 定義當一個元素的內容太大而無法適應塊級格式化上下文?時候該做什么。它是?overflow-x 和overflow-y的?簡寫屬性?。")值不為?`visible`的塊元素 * [`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display "在 CSS 規范（特指 CSS Level 1/2/3 規范）中查閱 display 屬性的所有取值時需要注意：個別取值的詳細信息記錄在獨立的規范中。例如，display: flex 的詳細信息在 CSS Flexible Box Model 規范中記錄。可以在本文檔末尾的表格中查看所有有關的規范。")值為[`flow-root`](https://drafts.csswg.org/css-display/#valdef-display-flow-root)? 的元素 * [`contain`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/contain "contain 屬性允許開發者聲明當前元素和它的內容盡可能的獨立于 DOM 樹的其他部分。這使得瀏覽器在重新計算布局、樣式、繪圖或它們的組合的時候，只會影響到有限的 DOM?區域，而不是整個頁面。")值為?`layout`、`content?`或paint?的元素 * 彈性元素（[`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display "在 CSS 規范（特指 CSS Level 1/2/3 規范）中查閱 display 屬性的所有取值時需要注意：個別取值的詳細信息記錄在獨立的規范中。例如，display: flex 的詳細信息在 CSS Flexible Box Model 規范中記錄。可以在本文檔末尾的表格中查看所有有關的規范。")為?`flex`?或?`inline-flex?`元素的直接子元素） * 網格元素（[`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display "在 CSS 規范（特指 CSS Level 1/2/3 規范）中查閱 display 屬性的所有取值時需要注意：個別取值的詳細信息記錄在獨立的規范中。例如，display: flex 的詳細信息在 CSS Flexible Box Model 規范中記錄。可以在本文檔末尾的表格中查看所有有關的規范。")為?`grid`?或?`inline-grid`?元素的直接子元素） * 多列容器（元素的?[`column-count`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/column-count "column-count?CSS屬性，描述元素的列數。")或?[`column-width`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/column-width "此頁面仍未被本地化, 期待您的翻譯!")不為?`auto，包括?``column-count`?為?`1`） * `column-span`?為?`all`?的元素始終會創建一個新的BFC，即使該元素沒有包裹在一個多列容器中（[標準變更](https://github.com/w3c/csswg-drafts/commit/a8634b96900279916bd6c505fda88dda71d8ec51)，[Chrome?bug](https://bugs.chromium.org/p/chromium/issues/detail?id=709362)）。塊格式化上下文包含創建它的元素內部的所有內容. 塊格式化上下文對浮動定位（參見[`float`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/float "此頁面仍未被本地化, 期待您的翻譯!")）與清除浮動（參見[`clear`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear "clear?CSS 屬性指定一個元素是否必須移動(清除浮動后)到在它之前的浮動元素下面。clear 屬性適用于浮動和非浮動元素。")）都很重要。浮動定位和清除浮動時只會應用于同一個BFC內的元素。浮動不會影響其它BFC中元素的布局，而清除浮動只能清除同一BFC中在它前面的元素的浮動。外邊距折疊（[Margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)）也只會發生在屬于同一BFC的塊級元素之間。