IQCaseCollection

InterviewQuestionBank 案例 Demo

← 返回列表

BFC

Block Formatting Context（块级格式化上下文）是一块独立渲染区域。 下面三组对比请盯着「红色边框高度」「两盒间距」「绿色背景形状」看，差异会非常明显。

它主要解决什么问题

  1. 浮动高度塌陷 —— 父级边框高度变成 0，包不住 float。
  2. 垂直外边距重叠 —— 20px + 20px 不会变成 40px，而是合并成 20px。
  3. 文字 / 背景环绕浮动 —— 普通块背景会被 float“挖空”；BFC 后变成整齐两栏。

1. 浮动导致父级高度塌陷

看红色边框：左边几乎是一条线（高度 ≈ 0），绿色 float 漏到外面； 右边给父级加了 display: flow-root，红框把 float 完整包住。

未触发 BFC · 父高度 0px
float A
float B
↓ 我是父元素后面的文字，被塌陷影响了

父元素没有高度，红框贴成一条线；float 溢出到框外，后面的文字也会顶上来。

父级 BFC · 父高度 0px
float A
float B
↓ 我是父元素后面的文字，被正确推下去

父元素成为 BFC 后会计算浮动子元素高度，红框完整包住内容。

2. 垂直外边距重叠

两个盒子各自写了 20px 外边距。左边实际间距只有 20px（重叠）； 右边用 BFC 包住下面那个盒子后，间距变成 40px（20 + 20）。 中间黄色标尺直接标出距离。

重叠 · 实测间距 0px
上盒子 margin-bottom: 20px
下盒子 margin-top: 20px
0px

相邻兄弟的垂直 margin 会合并，取较大值，不会相加。

BFC 包裹 · 实测间距 0px
上盒子 margin-bottom: 20px
下盒子 margin-top: 20px
0px

关键：不是给下盒子本身加 BFC，而是用 BFC 容器包住它， 这样内部的 margin-top 不会再和上面的 margin-bottom 合并。

3. 挡住浮动，避免内容环绕

盯着绿色背景的形状：左边被黄色 float“挖成 L 形”； 右边给绿色区域加 BFC 后，变成完整矩形，乖乖待在右侧。

未触发 BFC · 背景呈 L 形
float
侧栏
绿色是普通块的背景。注意：它的盒子其实横跨整行， 只有文字和背景绘制时让开了浮动，所以看起来像被挖空的 L 形。 多写几行文字，环绕效果会更明显。

普通块级盒子仍会延伸到 float 下方，只是内容绕开。

右侧 BFC · 背景是完整矩形
float
侧栏
绿色区域触发 BFC 后，整块被限制在 float 旁边的剩余宽度里， 背景变成规整矩形，不再钻到 float 下面。这就是经典两栏布局思路。

右侧独立成一个格式化上下文，不再被左侧 float 侵入。

4. 其他触发 BFC 的方式

上面对比用的是 display: flow-root。 下面三种同样能创建 BFC，这里各举一个「包住浮动」的例子。

overflow: hidden
float
float

overflow 不为 visible（hidden / auto / scroll）时会创建 BFC。

.box { overflow: hidden; }
float: left
float
float

元素自身设置了 float 后会成为 BFC，也能包住内部浮动。

.box { float: left; }
position: absolute
float
float

position: absolute / fixed 会创建 BFC（示例用 absolute）。

.box { position: absolute; }

触发 BFC 的常用写法

/* 触发 BFC 的常见方式 */

/* 1. display: flow-root / inline-block（上面三组对比用的是 flow-root） */
.bfc { display: flow-root; }

/* 2. overflow 不是 visible */
.bfc { overflow: hidden; /* 或 auto / scroll */ }

/* 3. 设置 float */
.bfc { float: left; }

/* 4. position: absolute / fixed */
.bfc { position: absolute; }