CSS BFC

什么是 BFC

BFC（Block Formatting Context，块级格式化上下文）是 CSS 中的一个渲染概念，它是一个独立的渲染区域，规定了内部块级元素的布局方式，与外部元素互不影响。

BFC 的特性

1. 内部元素垂直排列：BFC 内部的块级元素会在垂直方向上一个接一个地排列
2. 外边距折叠：BFC 内部的相邻块级元素的外边距会发生折叠
3. 独立容器：BFC 是一个独立的容器，内部元素的布局不会影响外部元素
4. 浮动元素包含：BFC 可以包含浮动元素，防止浮动元素溢出
5. 清除浮动：BFC 可以清除浮动，避免高度塌陷

如何触发 BFC

1. 根元素：html 元素本身就是一个 BFC
2. 浮动元素：float 值不为 none
3. 定位元素：position 值为 absolute 或 fixed
4. 块级元素：display 值为 inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid
5. 溢出元素：overflow 值不为 visible

BFC 的应用场景

1. 清除浮动

.container {
  overflow: hidden; /* 触发 BFC */
}

.float-element {
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
}

2. 防止外边距折叠

.container {
  overflow: hidden; /* 触发 BFC */
  margin: 20px;
}

.item {
  margin: 20px;
  background-color: blue;
  height: 50px;
}

3. 两栏布局

.container {
  width: 100%;
}

.left {
  float: left;
  width: 200px;
  height: 300px;
  background-color: red;
}

.right {
  overflow: hidden; /* 触发 BFC */
  height: 300px;
  background-color: blue;
}

4. 防止浮动元素覆盖

.container {
  width: 100%;
}

.float-element {
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
}

.normal-element {
  overflow: hidden; /* 触发 BFC */
  background-color: blue;
  height: 200px;
}

BFC 的工作原理

1. 创建独立渲染区域：BFC 会创建一个独立的渲染区域，内部元素的布局与外部元素互不影响
2. 计算高度：BFC 会计算浮动元素的高度，避免高度塌陷
3. 处理外边距：BFC 内部的外边距会发生折叠，但与外部元素的外边距不会折叠
4. 清除浮动：BFC 会包含浮动元素，防止浮动元素溢出到外部

总结

BFC 是 CSS 中的一个重要概念，它可以帮助我们解决布局中的许多问题，如清除浮动、防止外边距折叠、创建两栏布局等。通过触发 BFC，我们可以创建更加稳定和可预测的布局结构。