跳到主要内容

块格式化上下文

块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

下列方式会创建块格式化上下文：

  • 根元素<html>
  • 浮动元素 （float不为none）
  • 绝对定位元素 （position为absolute或者fixed 移除正常文档流）
  • 行内块元素 （display为inline-block）
  • 表格相关
  • overflow 值不为 visible、clip 的块元素
  • display 值为 flow-root 的元素
  • 弹性元素 （display为flex的直接子元素）
  • 网格元素 （display为grid的直接子元素）

格式化上下文影响布局，通常，我们会为定位和清除浮动创建新的 BFC，而不是更改布局，因为它将：

  • 包含内部浮动
  • 排除外部浮动
  • 阻止 外边距重叠

示例​

包含内部浮动​

让浮动内容和周围的内容等高。

在下面的例子中，我们让 <div> 元素浮动，并给它一个 border 效果。<div> 里的内容现在已经在浮动元素周围浮动起来了。由于浮动的元素比它旁边的元素高，所以 <div> 的边框穿出了浮动。浮动脱离了文档流，所以 <div> 的 background 和 border 仅仅包含了内容，不包含浮动。

接下来我们将container变为BFC:

  • 将overflow设置为hidden
  • 将display设置为flow-root

设置 float 脱离了正常文档流。

排除外部浮动​

接下来我们将container变为BFC:

  • 将overflow设置为hidden
  • 将display设置为flow-root

设置 float 脱离了正常文档流。

外边距重叠​

创建新的 BFC 避免两个相邻元素之间的外边距重叠。