lazyken

# BFC

MDN BFC (opens new window) 块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特征。

# 触发 BFC

  • 根元素（<html>、<body>）
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • display 具有下面值时：
    • 弹性元素（「display 为 flex 或 inline-flex 元素」的直接子元素），且他们本身不是 flex 或 frid 或 table containers。
    • 网格元素（「display 为 grid 或 inline-grid 元素」的直接子元素），且他们本身不是 flex 或 frid 或 table containers。
    • inline-block、flow-root
    • table-cell、table-caption、table、table-row、 table-row-group、table-header-group、table-footer-group、inline-table
  • overflow 计算值(Computed)不为 visible 的块元素 (hidden、auto、scroll)
  • 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
  • column-span 为 all 的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中

块格式化上下文包含创建它的元素内部的所有内容.

# BFC 处理浮动和清除浮动

  • 浮动定位和清除浮动时只会应用于同一个 BFC 内的元素。浮动不会影响其它 BFC 中元素的布局，而清除浮动只能清除同一 BFC 中在它前面的元素的浮动。
  • 外边距折叠（Margin collapsing）也只会发生在属于同一 BFC 的块级元素之间。

# 常用的创建新 BFC 的方式

  1. overflow: auto;
  2. display: flow-root;

overflow: auto和display: flow-root都能让元素创建新的 BFC，新的 BFC 包含该元素的所有子元素。
该元素创建新的 BFC，一般有 2 个用途：

# 清除浮动

  1. 第一种：与该元素同级的元素（即他的兄弟元素）如果是浮动的，那么这个浮动不会影响到该元素新创建的 BFC，该元素相当于清除浮动换一行。
  2. 第二种：该元素创建 BFC 后，它的子元素为浮动元素，则该子元素的浮动不会影响 BFC 外面的元素。最常见的例子是，父元素高度为 0，子元素浮动后，没有撑开父元素，此时让父元素创建 BFC，则子元素的浮动会包含在 BFC 中，父元素被撑开了。

# 处理外边距折叠

创建新的 BFC 避免两个相邻 <div> 之间的 外边距合并 问题。具体来说是使用一个 BFC 元素将其中一个兄弟元素包在里面来让原来两个兄弟元素的外边距不再合并。

← CSS 优先级计算 →