BFC块级格式化上下文深度解析

一句话概括

BFC（Block Formatting Context，块级格式化上下文）是 CSS 渲染中的一个独立布局区域，内部元素的排列和定位不受外部影响，同时它也是清除浮动、防止外边距合并、实现自适应布局的强力工具。

背景与意义

在学习 CSS 的某个阶段，你一定会遇到这样的困惑：

为什么一个 float 的元素会让父容器高度塌陷？为什么加上 overflow: hidden 就好了？为什么两个相邻的块级元素的 margin 会”打架”？为什么用一个元素包裹住浮动元素后它能重新”识趣地”包住内容？

所有这些问题的答案都指向同一个概念——BFC。

BFC（Block Formatting Context）是 CSS 规范中定义的一个渲染概念。它听起来很抽象，因为它不是一个”可以看到的属性”，而是一种页面元素被渲染时的工作状态。从 1996 年 CSS2 规范起，BFC 就已存在，但在很长一段时间里，大多数前端工程师只是”知其然，不知其所以然”——知道 overflow: hidden 可以清浮动，但不知道为什么。

理解 BFC 的价值在于：

1. 彻底理解清除浮动的原理——不再只是背代码片段
2. 掌握布局隔离机制——一个 BFC 内的元素不会”跑出去”影响其他元素
3. 解决顽固的布局问题——外边距合并、浮动溢出等
4. 提升调试能力——当布局出问题时，你能从 BFC 的角度理解为什么

概念与定义

什么是 BFC？

BFC（Block Formatting Context）是 W3C CSS 规范中的一个概念。它决定了块级元素如何排列、浮动元素如何与周围元素交互。

简单理解： BFC 就是一个”独立结界”——这个结界内的元素布局不受外部影响，外部元素也看不到结界内部的布局变化。

默认的块级格式化上下文

默认情况下，每个 HTML 文档的根元素 html 就创建了一个 BFC。在正常流（normal flow）中，块级元素从上到下垂直排列，它们之间的距离由 margin 决定——这都是在默认 BFC 中进行的。

BFC 的视觉表现

当一个元素触发了 BFC，它会表现出以下行为：

• 内部块级元素从上到下排列（垂直方向）
• 不包含浮动元素（可以清除浮动）
• 不会与浮动元素重叠
• 外边距不会与子元素的外边距合并

核心知识点拆解

1. BFC 的触发条件

哪些 CSS 属性可以让一个元素触发 BFC？以下是所有方式：

/* 1. html 根元素（总是 BFC） */
html { }

/* 2. float 不是 none（最常用之一） */
.float-left  { float: left; }
.float-right { float: right; }

/* 3. overflow 不是 visible（最常用的触发方式） */
.bfc-overflow  { overflow: hidden; }
.bfc-auto      { overflow: auto; }
.bfc-scroll    { overflow: scroll; }

/* 4. display: inline-block / table-cell / table-caption */
.bfc-inline-block { display: inline-block; }
.bfc-table-cell   { display: table-cell; }
.bfc-table-caption { display: table-caption; }

/* 5. display: flow-root（最语义化的 BFC 触发方式，CSS3 新增） */
.bfc-flow-root { display: flow-root; }

/* 6. position: absolute / fixed */
.bfc-absolute { position: absolute; }
.bfc-fixed    { position: fixed; }

/* 7. display: flex / inline-flex （弹性项目自动是 BFC） */
.bfc-flex { display: flex; }

/* 8. display: grid / inline-grid （网格项目自动是 BFC） */
.bfc-grid { display: grid; }

/* 9. contain: layout / content / paint （CSS Containment） */
.bfc-contain { contain: layout; }

最常见的触发方式对比：

方式	副作用	推荐度
overflow: hidden	可能裁剪内容	⭐⭐⭐ 好用但有副作用
overflow: auto	可能显示滚动条	⭐⭐ 谨慎使用
float: left	元素本身也浮动	⭐⭐ 场景有限
display: inline-block	元素变成行内块	⭐⭐ 可能打乱布局
display: flow-root	无副作用，语义清晰	⭐⭐⭐⭐⭐ 强烈推荐
position: absolute	脱离文档流	⭐⭐ 局限大
display: flex	改变了布局模式	⭐⭐⭐⭐ 如果本来就用 flex

2. BFC 与清除浮动（核心应用）

这是 BFC 最经典的场景——父容器高度塌陷。

<!-- 示例1：BFC 清除浮动演示 -->
<div class="bfc-demo">
  <h3>BFC 清除浮动</h3>
  
  <div class="bfc-compare">
    <!-- 没有 BFC → 高度塌陷 -->
    <div class="compare-case">
      <p class="case-title">❌ 没有 BFC — 父容器高度塌陷</p>
      <div class="parent no-bfc">
        <div class="child float">浮动元素</div>
        <div class="child normal">普通元素</div>
      </div>
      <p class="hint">父容器高度为 0，因为浮动元素脱离文档流</p>
    </div>
    
    <!-- 使用 overflow: hidden → 触发 BFC -->
    <div class="compare-case">
      <p class="case-title">✅ overflow: hidden — 触发 BFC</p>
      <div class="parent bfc-over">
        <div class="child float">浮动元素</div>
        <div class="child normal">普通元素</div>
      </div>
      <p class="hint">父容器包裹住浮动元素和普通元素</p>
    </div>
    
    <!-- 使用 display: flow-root → 最佳方案 -->
    <div class="compare-case">
      <p class="case-title">✅ display: flow-root — 推荐方案</p>
      <div class="parent bfc-flow-root">
        <div class="child float">浮动元素</div>
        <div class="child normal">普通元素</div>
      </div>
      <p class="hint">无副作用，语义清晰，高度正常包裹</p>
    </div>
  </div>
</div>

<style>
.bfc-demo {
  font-family: sans-serif;
}
.bfc-demo .bfc-compare {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.bfc-demo .compare-case {
  flex: 1 1 280px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
}
.bfc-demo .case-title {
  font-weight: 500;
  font-size: 14px;
  margin: 0 0 10px 0;
}
.bfc-demo .parent {
  background: #e3f2fd;
  border: 2px solid #90caf9;
  border-radius: 6px;
  padding: 5px;
  /* 不加 BFC 触发 — 不演示 overflow hidden 的方式 */
}
.bfc-demo .parent.bfc-over {
  overflow: hidden;   /* 触发 BFC */
}
.bfc-demo .parent.bfc-flow-root {
  display: flow-root; /* 触发 BFC，无副作用 */
}
.bfc-demo .child {
  padding: 15px;
  border-radius: 4px;
  margin: 5px;
}
.bfc-demo .child.float {
  float: left;
  background: #e74c3c;
  color: white;
}
.bfc-demo .child.normal {
  background: #3498db;
  color: white;
}
.bfc-demo .hint {
  font-size: 12px;
  color: #666;
  margin: 8px 0 0 0;
  font-style: italic;
}
</style>

原理： 当父容器触发了 BFC，它会计算浮动子元素的高度作为其自身高度的一部分——即”包含浮动”。而不触发 BFC 时，浮动元素脱离文档流，父容器只考虑非浮动子元素，所以高度塌陷。

3. BFC 与两栏自适应布局

BFC 不会与浮动元素重叠的特性，是实现”左侧固定、右侧自适应”布局的优雅方案。

<!-- 示例2：BFC 实现两栏自适应布局 -->
<div class="layout-demo">
  <h3>BFC 实现两栏自适应布局</h3>
  
  <div class="layout-compare">
    <!-- 方案 A：不用 BFC — 右侧会与浮动元素重叠 -->
    <div class="layout-case">
      <p class="case-title">❌ 不触发 BFC — 右侧内容被浮动元素遮挡</p>
      <div class="layout-wrapper">
        <div class="left-float">左侧固定宽度<br>float: left<br>width: 200px</div>
        <div class="right-overlap">右侧没有 BFC，文字会在浮动元素后面绕排，如果内容不够多甚至看不到完整的右侧区域</div>
      </div>
    </div>
    
    <!-- 方案 B：触发 BFC — 右侧自动形成独立区域 -->
    <div class="layout-case">
      <p class="case-title">✅ overflow: hidden 触发 BFC</p>
      <div class="layout-wrapper">
        <div class="left-float">左侧固定宽度<br>float: left<br>width: 200px</div>
        <div class="right-bfc" style="overflow:hidden;">右侧触发 BFC，不与浮动元素重叠，自动占据剩余宽度。这是经典的两栏自适应布局方案。</div>
      </div>
    </div>
    
    <!-- 方案 C：display: flow-root — 最佳实践 -->
    <div class="layout-case">
      <p class="case-title">✅ display: flow-root — 最佳 BFC 方案</p>
      <div class="layout-wrapper">
        <div class="left-float">左侧固定宽度<br>float: left<br>width: 200px</div>
        <div class="right-bfc" style="display:flow-root;">使用 display: flow-root，语义清晰，无副作用。这是 CSS 标准推荐的最佳方式。</div>
      </div>
    </div>
  </div>
</div>

<style>
.layout-demo {
  font-family: sans-serif;
}
.layout-demo .layout-compare {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.layout-demo .layout-case {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
}
.layout-demo .case-title {
  font-weight: 500;
  font-size: 14px;
  margin: 0 0 10px 0;
}
.layout-demo .layout-wrapper {
  background: #f0f0f0;
  border: 2px solid #ddd;
  border-radius: 6px;
}
.layout-demo .left-float {
  float: left;
  width: 200px;
  background: #e74c3c;
  color: white;
  padding: 20px 15px;
  min-height: 100px;
}
.layout-demo .right-overlap {
  background: #3498db;
  color: white;
  padding: 20px 15px;
  min-height: 120px;
}
.layout-demo .right-bfc {
  background: #2ecc71;
  color: white;
  padding: 20px 15px;
  min-height: 100px;
}
</style>

4. BFC 阻止外边距合并

<!-- 示例3：BFC 阻止 margin 合并 -->
<div class="margin-demo">
  <h3>BFC 阻止外边距合并</h3>
  
  <div class="margin-compare">
    <!-- 默认：外边距合并 -->
    <div class="margin-case">
      <p class="case-title">❌ 默认行为 — 外边距合并</p>
      <div class="margin-parent">
        <div class="margin-child" style="margin-bottom:30px; background:#e74c3c;">margin-bottom: 30px</div>
        <div class="margin-child" style="margin-top:20px; background:#3498db;">margin-top: 20px</div>
      </div>
      <p class="result">实际间距：<strong>30px</strong>（取较大值，不是 50px）</p>
    </div>

    <!-- BFC 隔离：阻止合并 -->
    <div class="margin-case">
      <p class="case-title">✅ BFC 隔离 — 阻止外边距合并</p>
      <div class="margin-parent">
        <div class="margin-child" style="margin-bottom:30px; background:#e74c3c;">margin-bottom: 30px</div>
        <div style="overflow:hidden;">  <!-- BFC 隔离层 -->
          <div class="margin-child" style="margin-top:20px; background:#3498db;">margin-top: 20px</div>
        </div>
      </div>
      <p class="result">实际间距：<strong>50px</strong>（30px + 20px，不再合并）</p>
    </div>
  </div>
</div>

<style>
.margin-demo {
  font-family: sans-serif;
}
.margin-demo .margin-compare {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.margin-demo .margin-case {
  flex: 1 1 350px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
}
.margin-demo .case-title {
  font-weight: 500;
  margin: 0 0 10px 0;
  font-size: 14px;
}
.margin-demo .margin-parent {
  background: #e8e8e8;
  border: 2px solid #ccc;
  padding: 5px;
}
.margin-demo .margin-child {
  padding: 15px;
  color: white;
  text-align: center;
  font-size: 13px;
}
.margin-demo .result {
  font-size: 13px;
  margin: 8px 0 0 0;
  color: #555;
}
</style>

5. BFC 的边界隔离特性

<!-- 示例4：BFC 的隔离效果 -->
<div class="isolation-demo">
  <h3>BFC 隔离：元素不会"跑出去"</h3>
  
  <div class="isolation-compare">
    <!-- 没有 BFC — 子元素的 margin 穿透到父容器外 -->
    <div class="iso-case">
      <p class="case-title">❌ 没有 BFC — 子元素 margin 穿透</p>
      <div class="iso-parent broken">
        <div class="iso-child">这个子元素的 margin-top: 40px 穿透到父容器外了</div>
      </div>
      <p class="result">父容器和子元素之间的"margin 距离"实际上出现在父容器外部</p>
    </div>
    
    <!-- 有 BFC — margin 被封闭在结界内 -->
    <div class="iso-case">
      <p class="case-title">✅ overflow: hidden 触发 BFC</p>
      <div class="iso-parent fixed" style="overflow:hidden;">
        <div class="iso-child">BFC 把 margin 限制在父容器内部</div>
      </div>
      <p class="result">子元素的 margin-top 从父容器的上边界开始计算</p>
    </div>
    
    <!-- display: flow-root -->
    <div class="iso-case">
      <p class="case-title">✅ display: flow-root</p>
      <div class="iso-parent fixed" style="display:flow-root;">
        <div class="iso-child">同样效果，无副作用</div>
      </div>
      <p class="result">margin-top 正确地在父容器内部生效</p>
    </div>
  </div>
</div>

<style>
.isolation-demo {
  font-family: sans-serif;
}
.isolation-demo .isolation-compare {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.isolation-demo .iso-case {
  flex: 1 1 300px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
}
.isolation-demo .case-title {
  font-weight: 500;
  font-size: 14px;
  margin: 0 0 10px 0;
}
.isolation-demo .iso-parent {
  background: #d5f5e3;
  border: 2px solid #27ae60;
  border-radius: 4px;
  /* 故意不加 padding 让 margin 合并凸显 */
}
.isolation-demo .iso-parent.broken {
  /* 没有 BFC，margin 会穿透 */
}
.isolation-demo .iso-child {
  margin-top: 40px;
  background: #27ae60;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 13px;
}
.isolation-demo .result {
  font-size: 12px;
  color: #666;
  margin: 8px 0 0 0;
  font-style: italic;
}
</style>

原理： 父子元素的 margin 合并发生在同一个 BFC 中。当父元素创建新的 BFC 后，子元素就在”另一个”格式化上下文中，它们的 margin 不再与外部的父元素 margin 合并。

实战案例

场景：完整的多栏文章布局

<!-- 实战案例：BFC 在复杂文章布局中的应用 -->
<div class="article-layout">
  <h3>📰 BFC 文章布局实战</h3>

  <!-- 1. 用 BFC 做左侧图片 → 右侧文字 -->
  <div class="article-section">
    <h4>1. 图文混排（float + BFC）</h4>
    <div class="media-block">
      <img src="https://picsum.photos/200/150?random=1" alt="示例图片" class="media-img">
      <div class="media-body" style="display:flow-root;">
        <h5>BFC 让文字不与图片重叠</h5>
        <p>传统的 float 布局中，文字会围绕浮动图片排列。但如果我们希望文字形成一个独立的列，不围绕图片，就需要触发 BFC。这里使用了 <code>display: flow-root</code>，让文字块成为独立的格式化上下文。</p>
        <p>这种方式比设置 <code>margin-left</code> 更优雅，因为它自适应图片宽度。</p>
      </div>
    </div>
  </div>

  <!-- 2. 多列侧边栏 + 主内容 -->
  <div class="article-section">
    <h4>2. 左侧栏 + 主内容（float + BFC）</h4>
    <div class="two-col-layout">
      <aside class="col-sidebar">
        <h5>📋 目录</h5>
        <ul>
          <li>BFC 定义</li>
          <li>触发条件</li>
          <li>清除浮动</li>
          <li>隔离效果</li>
        </ul>
      </aside>
      <main class="col-main" style="display:flow-root;">
        <h5>主内容区域</h5>
        <p>利用 BFC 不与浮动元素重叠的特性，实现左侧栏 + 右侧自适应的经典布局。左侧栏 float 浮动，右侧使用 display: flow-root 触发 BFC。</p>
        <p>比 Flexbox/Gird 实现更早，但原理仍然值得理解——很多旧项目依然在使用这种方案。</p>
      </main>
    </div>
  </div>

  <!-- 3. 卡片网格（BFC 高度计算） -->
  <div class="article-section">
    <h4>3. 卡片网格的等高效果</h4>
    <div class="card-grid-section">
      <div class="grid-item">
        <div class="grid-card">
          <div class="grid-img" style="background:#e74c3c;">📱</div>
          <div class="grid-body">
            <h5>移动端适配</h5>
            <p>响应式断点设计与触屏优化</p>
          </div>
          <div class="grid-footer">3 分钟前</div>
        </div>
      </div>
      <div class="grid-item">
        <div class="grid-card">
          <div class="grid-img" style="background:#3498db;">🎨</div>
          <div class="grid-body">
            <h5>UI 设计规范</h5>
            <p>组件设计系统的色彩、间距、字体定义</p>
          </div>
          <div class="grid-footer">15 分钟前</div>
        </div>
      </div>
      <div class="grid-item">
        <div class="grid-card">
          <div class="grid-img" style="background:#2ecc71;">⚙️</div>
          <div class="grid-body">
            <h5>性能优化</h5>
            <p>加载性能、渲染性能、内存管理策略总结</p>
          </div>
          <div class="grid-footer">1 小时前</div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.article-layout {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
}
.article-layout > h3 {
  padding: 15px;
  margin: 0;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}
.article-section {
  padding: 20px;
  border-bottom: 1px solid #eee;
}
.article-section:last-child { border-bottom: none; }
.article-section h4 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  font-size: 16px;
}

/* 图文混排 */
.media-block {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
}
.media-img {
  float: left;
  margin-right: 20px;
  border-radius: 6px;
}
.media-body h5 {
  margin: 0 0 8px 0;
  font-size: 16px;
}
.media-body p {
  margin: 0 0 8px 0;
  font-size: 14px;
  line-height: 1.6;
  color: #444;
}
.media-body code {
  background: #e8e8e8;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 13px;
}

/* 两列布局 */
.two-col-layout {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
}
.col-sidebar {
  float: left;
  width: 180px;
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.col-sidebar h5 {
  margin: 0 0 10px 0;
  font-size: 14px;
}
.col-sidebar ul {
  margin: 0;
  padding-left: 18px;
}
.col-sidebar li {
  font-size: 13px;
  color: #555;
  margin: 5px 0;
}
.col-main {
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.col-main h5 {
  margin: 0 0 10px 0;
  font-size: 15px;
}
.col-main p {
  margin: 0 0 8px 0;
  font-size: 14px;
  line-height: 1.6;
  color: #444;
}

/* 卡片网格 — 使用 BFC 实现等高列 */
.card-grid-section {
  display: flow-root;  /* 父容器 BFC 包裹浮动子元素 */
}
.grid-item {
  float: left;
  width: 30%;
  margin: 0 1.66%;
}
.grid-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s;
}
.grid-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.grid-img {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35px;
}
.grid-body {
  padding: 15px;
}
.grid-body h5 {
  margin: 0 0 8px 0;
  font-size: 15px;
}
.grid-body p {
  margin: 0;
  font-size: 13px;
  color: #666;
}
.grid-footer {
  padding: 10px 15px;
  border-top: 1px solid #eee;
  font-size: 12px;
  color: #999;
}
</style>

底层原理

BFC 在浏览器渲染引擎中的实现

在浏览器的 Layout 引擎中，BFC 的创建和处理发生在 Layout Tree 构建阶段。

BFC 的创建流程（简化版）：

1. 解析 HTML → 构建 DOM Tree
2. 计算样式 → 生成 Style Tree
3. 构建 Layout Tree → 创建 LayoutBox
4. 在 LayoutTree 构建时，判断每个 LayoutBox 是否创建新的 BFC：

   if (元素满足 BFC 触发条件) {
       创建新的 BlockFormattingContext
       设置 layoutBox.formattingContextType = BFC
       子元素的布局限制在这个 BFC 内
   } else {
       继承父元素的格式化上下文
   }

5. 在布局计算时：
   - 每个 BFC 独立计算块级元素的排列
   - 每个 BFC 包含其浮动子元素的高度
   - BFC 之间的交互遵守特定规则（不重叠、不合并 margin）

BFC 与 IFC 的关系

BFC 是块级格式化上下文。CSS 中还有行内格式化上下文（IFC，Inline Formatting Context）：

BFC: 块级元素从上到下排列 ← 我们正在深入学习的
IFC: 行内元素从左到右排列（如文本流）

一个块级元素内部既可以是 BFC（块级子元素），也可以是 IFC（行内子元素）。

关键点：一个元素同时只能处于一种格式化上下文中。

BFC 的高度计算规则

触发 BFC 的元素计算高度的规则与普通元素不同：

普通块级元素：
  height = 非浮动子元素的最高点 → 最低点（浮动子元素不参与计算）

BFC 元素：
  height = 所有子元素（含浮动子元素）的最高点 → 最低点

这就是为什么 overflow: hidden 可以”包裹”浮动元素——BFC 改变了高度计算规则，将浮动子元素也算入其内。

高频面试题解析

Q1: 什么是 BFC？如何创建 BFC？

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

创建方式（常考的前 5 个）：

1. html 根元素（默认 BFC）
2. float 值不为 none
3. overflow 值不为 visible（hidden、auto、scroll）
4. display: inline-block、flow-root、table-cell、flex、grid
5. position: absolute 或 fixed

面试中最佳回答： “最推荐使用 display: flow-root，它在 CSS3 中专为创建 BFC 而设计，没有任何副作用。”

Q2: BFC 有哪些作用？

1. 清除浮动：父容器触发 BFC 后能包裹浮动子元素
2. 防止元素重叠：BFC 不会与浮动元素重叠，用于实现自适应布局
3. 阻止外边距合并：不同 BFC 中的元素之间不会发生 margin 合并
4. 隔离布局：BFC 内部元素不会影响到外部布局

Q3: overflow: hidden 清除浮动的原理是什么？

overflow: hidden 让元素触发了 BFC。BFC 的高度计算规则会将浮动子元素的高度计入父容器，所以父容器不再高度塌陷。

注意：overflow: hidden 的副作用是可能裁剪超出元素边界的内容。如果不需要裁剪，display: flow-root 是更好的选择。

Q4: display: flow-root 是干什么的？为什么推荐它？

display: flow-root 是 CSS3 新增的一个 display 值，它的唯一目的就是创建一个 BFC。它没有任何副作用：

• 不像 overflow: hidden 会裁剪内容
• 不像 float 会让元素本身浮动
• 不像 display: inline-block 会改变元素的外在表现

“Flow-root” 这个名字的意思就是”创建块级格式化上下文的根元素”。

Q5: BFC 和外边距合并有什么关系？

外边距合并发生的条件是两个元素处于同一个 BFC 中。如果两个元素分属不同的 BFC，它们之间的 margin 不会合并。

<!-- 面试中可手写的例子 -->
<div class="bfc-container" style="overflow:hidden;">
  <div style="margin-bottom:30px;">A</div>
</div>
<div style="margin-top:20px;">B</div>
<!-- A 的 margin-bottom（30px）和 B 的 margin-top（20px）不会合并 -->
<!-- 因为 A 在 BFC 内，B 在主 BFC（根元素）中 -->

总结与扩展

BFC 不是一个新的 CSS 属性，而是理解 CSS 渲染机制的一个”心法”。当你从 BFC 的角度去看待布局时，许多”玄学”问题都会变得清晰：

1. 浮动高度塌陷 → 父容器没有触发 BFC
2. 外边距合并 → 两个元素在同一个 BFC 中
3. 浮动重叠 → 非浮动元素没有触发 BFC
4. 父子 margin 穿透 → 父容器没有触发 BFC

实际开发中的使用建议：

/* 清浮动 — 推荐方案 */
.clearfix {
  display: flow-root;
}
/* 或者传统的微清除浮动方案 */
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* 防止外边距合并 */
.parent {
  display: flow-root;
}

/* 两栏自适应布局（旧式方案） */
.left {
  float: left;
  width: 200px;
}
.right {
  display: flow-root; /* 替代 overflow: hidden */
}

与 IFC（Inline Formatting Context）对照理解：

对比	BFC	IFC
针对元素	块级元素	行内元素
排列方向	垂直方向	水平方向
关键属性	margin、border、width	vertical-align、line-height
触发方式	多种条件	行内元素自然产生

进阶知识点：

• CSS Containment（contain: layout 也会创建新的格式化上下文）
• CSS Cascading Context（层叠上下文）——与 BFC 不同的概念
• 不同浏览器引擎对 BFC 的实现差异（Blink vs WebKit vs Gecko）