前端码农

Appearance

BFC（块级格式化上下文） ​

导航目录 ​

概念 ​

BFC（Block Formatting Context，块级格式化上下文）可以理解为：浏览器在页面中划出的一块独立布局/渲染区域。在这个区域内，块级元素按一套相对“封闭”的规则排版，从而让区域内外的布局影响尽量隔离。

你可以记住它的两个核心价值：

  • 隔离布局影响：把一些布局规则（例如外边距折叠、与浮动的关系）限制在 BFC 内部
  • 让容器“包住”内容：某些情况下，开启 BFC 可以让父容器把浮动子元素也计算进高度里

触发条件（常用） ​

满足以下任一条件，元素会创建 BFC（列常见、好记的）：

  • float：不为 none
  • position：absolute / fixed
  • display：inline-block / table-cell / table-caption（以及更多表格相关值）
  • overflow：不为 visible（hidden / auto / scroll）

关键特性（理解 + 记结论） ​

BFC 的细节规则很多，这里抓住与日常布局最相关的 4 点：

  1. 内部块级盒子按文档流垂直排列
  2. 同一 BFC 内相邻块的垂直外边距会发生折叠（margin collapse）
  3. BFC 区域不会与浮动元素重叠（常用于两栏布局/自适应布局）
  4. 计算 BFC 高度时，会把内部浮动元素也纳入计算（常用于“清除浮动”的替代方案）

应用场景（附示例） ​

场景 1：解决垂直外边距折叠（margin collapse） ​

当两个块级元素上下相邻时，一个 margin-bottom + 另一个 margin-top 可能会发生外边距折叠，最终间距取两者中的较大值（而不是相加）。

一种常用做法是让其中一侧进入新的 BFC（例如给其中一个包一层，并开启 BFC），从而把折叠限制在各自的 BFC 内。

html
<div class="wrap">
  <div class="a"></div>
</div>
<div class="b"></div>
css
.a {
  height: 40px;
  margin-bottom: 30px;
  background: #ddd;
}
.b {
  height: 40px;
  margin-top: 30px;
  background: #bbb;
}

/* 关键：让 .a 所在容器创建 BFC，避免与外部发生折叠 */
.wrap {
  overflow: hidden;
}

要点：

  • 外边距折叠只会发生在“同一个 BFC”内的相邻块之间
  • 通过创建新的 BFC，可以把折叠影响“隔离”在容器内部

场景 2：清除浮动（让父元素包住浮动子元素） ​

经典问题：子元素浮动后脱离普通文档流，父元素高度可能塌陷。

html
<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>
css
.left,
.right {
  float: left;
  width: 50%;
  height: 60px;
}
.left {
  background: #ddd;
}
.right {
  background: #bbb;
}

/* 关键：父元素创建 BFC，高度会把内部浮动也算进去 */
.parent {
  overflow: auto;
}

要点：

  • 父元素创建 BFC 后，会包含内部浮动元素的高度
  • overflow: hidden 可能裁剪溢出内容；需要滚动条时优先用 overflow: auto

场景 3：两栏布局中，右侧不与左侧浮动重叠 ​

左侧浮动固定宽度，右侧自适应时，让右侧创建 BFC，右侧就会自动避开浮动区域。

html
<div class="layout">
  <div class="aside"></div>
  <div class="main"></div>
</div>
css
.aside {
  float: left;
  width: 200px;
  height: 80px;
  background: #ddd;
}

/* 关键：创建 BFC（任选一种方式） */
.main {
  overflow: hidden;
  height: 80px;
  background: #bbb;
}

要点：

  • BFC 不会与浮动区域重叠，因此右侧能自然“贴着”左侧浮动元素

你应该记住的结论 ​

  • BFC 是一个独立的布局上下文，用来隔离布局影响
  • 解决三类高频问题：外边距折叠、父元素包住浮动、两栏布局避开浮动

BFC（块级格式化上下文） ​

概念 ​

BFC（Block Formatting Context，块级格式化上下文）可以理解为：浏览器在页面中划出的一块独立布局/渲染区域。在这个区域内，块级元素按一套相对“封闭”的规则排版，从而让区域内外的布局影响尽量隔离。

你可以记住它的两个核心价值：

  • 隔离布局影响：把一些布局规则（例如外边距折叠、与浮动的关系）限制在 BFC 内部
  • 让容器“包住”内容：某些情况下，开启 BFC 可以让父容器把浮动子元素也计算进高度里

触发条件（常用） ​

满足以下任一条件，元素会创建 BFC（列常见、好记的）：

  • float：不为 none
  • position：absolute / fixed
  • display：inline-block / table-cell / table-caption（以及更多表格相关值）
  • overflow：不为 visible（hidden / auto / scroll）

关键特性（理解 + 记结论） ​

BFC 的细节规则很多，这里抓住与日常布局最相关的 4 点：

  1. 内部块级盒子按文档流垂直排列
  2. 同一 BFC 内相邻块的垂直外边距会发生折叠（margin collapse）
  3. BFC 区域不会与浮动元素重叠（常用于两栏布局/自适应布局）
  4. 计算 BFC 高度时，会把内部浮动元素也纳入计算（常用于“清除浮动”的替代方案）

应用场景（附示例） ​

场景 1：解决垂直外边距折叠（margin collapse） ​

当两个块级元素上下相邻时，一个 margin-bottom + 另一个 margin-top 可能会发生外边距折叠，最终间距取两者中的较大值（而不是相加）。

一种常用做法是让其中一侧进入新的 BFC（例如给其中一个包一层，并开启 BFC），从而把折叠限制在各自的 BFC 内。

html
<div class="wrap">
  <div class="a"></div>
</div>
<div class="b"></div>
css
.a {
  height: 40px;
  margin-bottom: 30px;
  background: #ddd;
}
.b {
  height: 40px;
  margin-top: 30px;
  background: #bbb;
}

/* 关键：让 .a 所在容器创建 BFC，避免与外部发生折叠 */
.wrap {
  overflow: hidden;
}

要点：

  • 外边距折叠只会发生在“同一个 BFC”内的相邻块之间
  • 通过创建新的 BFC，可以把折叠影响“隔离”在容器内部

场景 2：清除浮动（让父元素包住浮动子元素） ​

经典问题：子元素浮动后脱离普通文档流，父元素高度可能塌陷。

html
<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>
css
.left,
.right {
  float: left;
  width: 50%;
  height: 60px;
}
.left {
  background: #ddd;
}
.right {
  background: #bbb;
}

/* 关键：父元素创建 BFC，高度会把内部浮动也算进去 */
.parent {
  overflow: auto;
}

要点：

  • 父元素创建 BFC 后，会包含内部浮动元素的高度
  • overflow: hidden 可能裁剪溢出内容；需要滚动条时优先用 overflow: auto

场景 3：两栏布局中，右侧不与左侧浮动重叠 ​

左侧浮动固定宽度，右侧自适应时，让右侧创建 BFC，右侧就会自动避开浮动区域。

html
<div class="layout">
  <div class="aside"></div>
  <div class="main"></div>
</div>
css
.aside {
  float: left;
  width: 200px;
  height: 80px;
  background: #ddd;
}

/* 关键：创建 BFC（任选一种方式） */
.main {
  overflow: hidden;
  height: 80px;
  background: #bbb;
}

要点：

  • BFC 不会与浮动区域重叠，因此右侧能自然“贴着”左侧浮动元素

你应该记住的结论 ​

  • BFC 是一个独立的布局上下文，用来隔离布局影响
  • 解决三类高频问题：外边距折叠、父元素包住浮动、两栏布局避开浮动

BFC（块级格式化上下文） ​

概念 ​

BFC（Block Formatting Context，块级格式化上下文）可以理解为：浏览器在页面中划出的一块独立布局/渲染区域。在这个区域内，块级元素按一套相对“封闭”的规则排版，从而让区域内外的布局影响尽量隔离。

你可以记住它的两个核心价值：

  • 隔离布局影响：把一些布局规则（例如外边距折叠、与浮动的关系）限制在 BFC 内部
  • 让容器“包住”内容：某些情况下，开启 BFC 可以让父容器把浮动子元素也计算进高度里

触发条件（常用） ​

满足以下任一条件，元素会创建 BFC（列常见、好记的）：

  • float：不为 none
  • position：absolute / fixed
  • display：inline-block / table-cell / table-caption（以及更多表格相关值）
  • overflow：不为 visible（hidden / auto / scroll）

关键特性（理解 + 记结论） ​

BFC 的细节规则很多，这里抓住与日常布局最相关的 4 点：

  1. 内部块级盒子按文档流垂直排列
  2. 同一 BFC 内相邻块的垂直外边距会发生折叠（margin collapse）
  3. BFC 区域不会与浮动元素重叠（常用于两栏布局/自适应布局）
  4. 计算 BFC 高度时，会把内部浮动元素也纳入计算（常用于“清除浮动”的替代方案）

应用场景（附示例） ​

场景 1：解决垂直外边距折叠（margin collapse） ​

当两个块级元素上下相邻时，一个 margin-bottom + 另一个 margin-top 可能会发生外边距折叠，最终间距取两者中的较大值（而不是相加）。

一种常用做法是让其中一侧进入新的 BFC（例如给其中一个包一层，并开启 BFC），从而把折叠限制在各自的 BFC 内。

html
<div class="wrap">
  <div class="a"></div>
</div>
<div class="b"></div>
css
.a {
  height: 40px;
  margin-bottom: 30px;
  background: #ddd;
}
.b {
  height: 40px;
  margin-top: 30px;
  background: #bbb;
}

/* 关键：让 .a 所在容器创建 BFC，避免与外部发生折叠 */
.wrap {
  overflow: hidden;
}

要点：

  • 外边距折叠只会发生在“同一个 BFC”内的相邻块之间
  • 通过创建新的 BFC，可以把折叠影响“隔离”在容器内部

场景 2：清除浮动（让父元素包住浮动子元素） ​

经典问题：子元素浮动后脱离普通文档流，父元素高度可能塌陷。

html
<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>
css
.left,
.right {
  float: left;
  width: 50%;
  height: 60px;
}
.left {
  background: #ddd;
}
.right {
  background: #bbb;
}

/* 关键：父元素创建 BFC，高度会把内部浮动也算进去 */
.parent {
  overflow: auto;
}

要点：

  • 父元素创建 BFC 后，会包含内部浮动元素的高度
  • overflow: hidden 可能裁剪溢出内容；需要滚动条时优先用 overflow: auto

场景 3：两栏布局中，右侧不与左侧浮动重叠 ​

左侧浮动固定宽度，右侧自适应时，让右侧创建 BFC，右侧就会自动避开浮动区域。

html
<div class="layout">
  <div class="aside"></div>
  <div class="main"></div>
</div>
css
.aside {
  float: left;
  width: 200px;
  height: 80px;
  background: #ddd;
}

/* 关键：创建 BFC（任选一种方式） */
.main {
  overflow: hidden;
  height: 80px;
  background: #bbb;
}

要点：

  • BFC 不会与浮动区域重叠，因此右侧能自然“贴着”左侧浮动元素

你应该记住的结论 ​

  • BFC 是一个独立的布局上下文，用来隔离布局影响
  • 解决三类高频问题：外边距折叠、父元素包住浮动、两栏布局避开浮动

BFC（块级格式化上下文） ​

概念 ​

BFC（Block Formatting Context，块级格式化上下文）可以理解为：浏览器在页面中划出的一块独立布局/渲染区域。在这个区域内，块级元素按一套相对“封闭”的规则排版，从而让区域内外的布局影响尽量隔离。

你可以记住它的两个核心价值：

  • 隔离布局影响：把一些布局规则（例如外边距折叠、与浮动的关系）限制在 BFC 内部
  • 让容器“包住”内容：某些情况下，开启 BFC 可以让父容器把浮动子元素也计算进高度里

触发条件（常用） ​

满足以下任一条件，元素会创建 BFC（列常见、好记的）：

  • float：不为 none
  • position：absolute / fixed
  • display：inline-block / table-cell / table-caption（以及更多表格相关值）
  • overflow：不为 visible（hidden / auto / scroll）

关键特性（理解 + 记结论） ​

BFC 的细节规则很多，这里抓住与日常布局最相关的 4 点：

  1. 内部块级盒子按文档流垂直排列
  2. 同一 BFC 内相邻块的垂直外边距会发生折叠（margin collapse）
  3. BFC 区域不会与浮动元素重叠（常用于两栏布局/自适应布局）
  4. 计算 BFC 高度时，会把内部浮动元素也纳入计算（常用于“清除浮动”的替代方案）

应用场景（附示例） ​

场景 1：解决垂直外边距折叠（margin collapse） ​

当两个块级元素上下相邻时，一个 margin-bottom + 另一个 margin-top 可能会发生外边距折叠，最终间距取两者中的较大值（而不是相加）。

一种常用做法是让其中一侧进入新的 BFC（例如给其中一个包一层，并开启 BFC），从而把折叠限制在各自的 BFC 内。

html
<div class="wrap">
  <div class="a"></div>
</div>
<div class="b"></div>
css
.a {
  height: 40px;
  margin-bottom: 30px;
  background: #ddd;
}
.b {
  height: 40px;
  margin-top: 30px;
  background: #bbb;
}

/* 关键：让 .a 所在容器创建 BFC，避免与外部发生折叠 */
.wrap {
  overflow: hidden;
}

要点：

  • 外边距折叠只会发生在“同一个 BFC”内的相邻块之间
  • 通过创建新的 BFC，可以把折叠影响“隔离”在容器内部

场景 2：清除浮动（让父元素包住浮动子元素） ​

经典问题：子元素浮动后脱离普通文档流，父元素高度可能塌陷。

html
<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>
css
.left,
.right {
  float: left;
  width: 50%;
  height: 60px;
}
.left {
  background: #ddd;
}
.right {
  background: #bbb;
}

/* 关键：父元素创建 BFC，高度会把内部浮动也算进去 */
.parent {
  overflow: auto;
}

要点：

  • 父元素创建 BFC 后，会包含内部浮动元素的高度
  • overflow: hidden 可能裁剪溢出内容；需要滚动条时优先用 overflow: auto

场景 3：两栏布局中，右侧不与左侧浮动重叠 ​

左侧浮动固定宽度，右侧自适应时，让右侧创建 BFC，右侧就会自动避开浮动区域。

html
<div class="layout">
  <div class="aside"></div>
  <div class="main"></div>
</div>
css
.aside {
  float: left;
  width: 200px;
  height: 80px;
  background: #ddd;
}

/* 关键：创建 BFC（任选一种方式） */
.main {
  overflow: hidden;
  height: 80px;
  background: #bbb;
}

要点：

  • BFC 不会与浮动区域重叠，因此右侧能自然“贴着”左侧浮动元素

你应该记住的结论 ​

  • BFC 是一个独立的布局上下文，用来隔离布局影响
  • 解决三类高频问题：外边距折叠、父元素包住浮动、两栏布局避开浮动

BFC（块级格式化上下文） ​

概念定义 ​

BFC（Block Formatting Context）是 CSS 中的一种重要布局概念：

  • 官方定义：MDN 将其解释为"块级格式化上下文"
  • 核心特性：一个独立的渲染区域，拥有自己的渲染规则
  • 隔离特性：内部元素不会与外部元素互相影响

触发条件 ​

以下 CSS 属性可以触发 BFC：

布局属性 ​

  • float: 除none以外的值
  • position: absolute或fixed

显示模式 ​

  • display:
    • inline-block
    • table-cell
    • table-caption

溢出处理 ​

  • overflow: 除visible以外的值（hidden/auto/scroll）

特性表现 ​

BFC 具有以下重要特性：

  1. 垂直排列：内部 Box 在垂直方向顺序排列
  2. 边距计算：垂直间距由 margin 决定
  3. 浮动隔离：不与 float 元素区域重叠
  4. 高度计算：计算高度时包含浮动元素
  5. 布局隔离：形成独立容器，内外元素互不影响

应用场景 ​

  • 如果二个 div 元素上下排列，一个设置 margin-bottom，另外一个设置 margin-top，会导致 margin 上下重叠，取比较大的一个值