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的块级元素之间。