什么是 BFC？如何创建 BFC？有什么应用？

BFC（Block Formatting Context，块级格式化上下文）是一个独立的渲染区域，内部元素的布局不会影响外部。

创建 BFC 的条件

• float 不为 none
• position 为 absolute 或 fixed
• display 为 inline-block、flex、grid、table-cell、flow-root 等
• overflow 不为 visible（如 hidden、auto、scroll）
• 根元素 <html> 本身就是 BFC

BFC 的特性

1. 内部的 Box 垂直方向上一个接一个放置
2. 属于同一个 BFC 的两个相邻 Box 的 margin 会发生折叠
3. BFC 区域不会与浮动元素重叠
4. 计算 BFC 高度时，浮动元素也参与计算

应用场景

1. 清除浮动

.container {
  overflow: hidden; /* 或 display: flow-root; */
}

2. 防止 margin 折叠

.parent {
  overflow: hidden; /* 创建 BFC，阻止子元素 margin 溢出 */
}

3. 实现两栏布局（左浮动 + 右 BFC）

.left { float: left; width: 200px; }
.right { overflow: hidden; /* BFC 不与浮动重叠 */ }

4. 防止文字环绕浮动元素

推荐方式

display: flow-root 是最干净的创建 BFC 方式，没有副作用（不会像 overflow: hidden 那样裁剪内容或显示滚动条）。

同分类其他题目