CSS之BFC（Block Formatting Context）

七崽爱吃小饼干2026/01/20阅读 0专栏 CSS/JavaScript

一、BFC 是什么？

BFC 全称是 块级格式化上下文（Block Formatting Context），可以把它理解成：一个独立的“布局容器”，容器内部的元素布局不会影响到外部元素，外部元素也不会影响到内部元素。

你可以把 BFC 想象成一个“结界”：结界里的元素有自己的一套布局规则，和结界外的元素互不干扰。

二、BFC 的布局规则（核心特性）

BFC 内部的元素遵循以下规则，这也是它能解决布局问题的关键：

内部的块级元素会垂直方向一个接一个排列；
内部元素的垂直间距由 margin 决定，但相邻两个块级元素的 margin 会重叠（但如果两个元素分属不同 BFC，则不会重叠）；
每个元素的左外边距（margin-left）会与包含块的左边界（border-left）相接触（即使开启了浮动也如此）；
BFC 区域不会与浮动元素（float）重叠；
BFC 会包含内部所有浮动元素，能清除浮动带来的“高度塌陷”问题。

三、如何触发 BFC？

满足以下任意一个条件，元素就会创建 BFC：

根元素（<html>），天然就是一个 BFC；
浮动元素（float 不为 none，如 float: left/right）；
绝对定位/固定定位元素（position: absolute/fixed）；
行内块元素（display: inline-block）；
表格单元格/表格标题（display: table-cell/table-caption）；
溢出处理（overflow 不为 visible，如 overflow: hidden/auto/scroll）；
弹性盒/网格容器（display: flex/grid）；
多列布局（column-count/column-width 不为 auto）。

四、BFC 的实际应用（解决常见布局问题）

BFC 不是一个“属性”，而是一种“布局状态”，核心价值是解决布局问题，下面是最常用的场景：

场景1：解决 margin 重叠问题

两个相邻的块级元素，垂直方向的 margin 会取最大值（而非相加），用 BFC 可以隔离它们：

html

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 未触发 BFC：两个 div 的 margin 会重叠，实际间距是 20px（取最大值） */
    .box1 {
      width: 100px;
      height: 100px;
      background: red;
      margin-bottom: 20px;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background: blue;
      margin-top: 10px;
    }

    /* 触发 BFC：用 overflow: hidden 给 box2 套一个 BFC 容器，margin 不再重叠 */
    .bfc-container {
      overflow: hidden; /* 触发 BFC */
    }
  </style>
</head>
<body>
  <!-- 未解决：margin 重叠 -->
  <div class="box1"></div>
  <div class="box2"></div>

  <!-- 解决：套 BFC 容器 -->
  <div class="box1"></div>
  <div class="bfc-container">
    <div class="box2"></div>
  </div>
</body>
</html>

场景2：清除浮动（解决父元素高度塌陷）

父元素包含浮动子元素时，父元素高度会“塌陷”（高度为 0），触发父元素的 BFC 可解决：

html

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 父元素高度塌陷：因为子元素浮动，父元素没有高度 */
    .parent {
      border: 2px solid black;
      /* 只需添加这一行，触发 BFC 即可清除浮动 */
      overflow: hidden; 
    }
    .child {
      width: 100px;
      height: 100px;
      background: pink;
      float: left; /* 子元素浮动 */
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

场景3：防止浮动元素覆盖

普通块级元素会被浮动元素覆盖，触发 BFC 可让其避开浮动元素：

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .float-box {
      width: 100px;
      height: 100px;
      background: orange;
      float: left; /* 浮动元素 */
    }
    .normal-box {
      width: 200px;
      height: 200px;
      background: green;
      /* 触发 BFC：避开浮动元素，不再被覆盖 */
      overflow: hidden; 
    }
  </style>
</head>
<body>
  <div class="float-box"></div>
  <div class="normal-box"></div>
</body>
</html>

总结

BFC 是独立的布局容器，内部元素布局与外部互不干扰，核心是“隔离”；
触发 BFC 有多种方式，最常用的是 overflow: hidden（简单且副作用小）；
BFC 主要用来解决：margin 重叠、浮动高度塌陷、浮动元素覆盖这三类常见布局问题。