怎么触发BFC，BFC有什么应用场景

pax大约 2 分钟

什么是 BFC

BFC（Block Formatting Context，块级格式化上下文）是 Web 页面中一个独立的渲染区域，内部的元素布局不会影响到外部元素，反之亦然。它是 CSS 中用于控制块级元素布局的一个重要概念。

触发 BFC 的条件

以下任一条件都可以触发 BFC：

1. 根元素（`<html>`）

HTML 根元素天然形成 BFC。

2. 浮动元素

当元素的 float 不为 none 时（如 float: left 或 float: right）。
```
.float-element {
  float: left;
}
```

3. 绝对定位元素

当元素的 position 为 absolute 或 fixed 时。

.absolute-element {
  position: absolute;
}

4. 行内块元素

当元素的 display 为 inline-block 时。

.inline-block-element {
  display: inline-block;
}

5. 表格单元格元素

当元素的 display 为 table-cell（HTML 表格单元格默认为此值）。
```
.table-cell-element {
  display: table-cell;
}
```

6. 表格标题元素

当元素的 display 为 table-caption 时。

7. 匿名表格单元格元素

如 display: table, table-row, table-row-group 等。

8. `overflow` 不为 `visible` 的块元素

当元素的 overflow 为 hidden, auto, scroll 时。

.overflow-hidden-element {
  overflow: hidden;
}

9. `display: flow-root`

新的布局方式，专门用于创建 BFC。

.flow-root-element {
  display: flow-root;
}

10. `contain: layout`, `content`, 或 `paint`

CSS Containment 属性值也可以触发 BFC。
```
.contain-element {
  contain: layout;
}
```

BFC 的应用场景

1. 清除浮动（最常见用途）

当子元素浮动导致父容器高度塌陷时，可以通过触发父元素的 BFC 来清除浮动影响。

<div class="container">
  <div class="float-box">浮动元素</div>
</div>

.container {
  overflow: hidden; /* 触发 BFC */
}
.float-box {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
}

2. 防止垂直外边距合并（Margin Collapse）

相邻块级元素的垂直 margin 会发生合并，通过 BFC 可以避免。

<div class="bfc-container">
  <p>段落1</p>
</div>
<p>段落2</p>

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

3. 自适应两栏布局

结合浮动和 BFC 实现左侧固定宽度、右侧自适应的布局。

<div class="left">左侧固定</div>
<div class="right">右侧自适应</div>

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
}
.right {
  overflow: hidden; /* 触发 BFC */
  height: 100px;
  background: blue;
}

4. 防止文字环绕图片

当图片浮动时，文字会环绕图片，通过 BFC 可以阻止这种行为。

<img src="image.jpg" class="float-img">
<div class="text">这是一段很长的文字...</div>

.float-img {
  float: left;
  width: 100px;
  height: 100px;
}
.text {
  overflow: hidden; /* 触发 BFC，防止环绕 */
}

总结

BFC 是 CSS 布局中的核心概念之一，掌握其触发条件和应用场景，可以有效解决布局中的常见问题，如清除浮动、防止 margin 合并、实现自适应布局等。在实际开发中，overflow: hidden 和 display: flow-root 是最常用的触发 BFC 的方式。