学完这篇，你能说清 BFC 到底是什么、怎么触发它，并在清除浮动、阻止 margin 合并、做两栏自适应布局这三个高频场景里随手用出来。
第一步：一句话理解 BFC
BFC（Block Formatting Context，块级格式化上下文）是页面上一块"独立王国"：里面的块级盒子怎么排列，由这块区域自己说了算，外面的布局影响不到它；反过来，它也不去干扰外面的元素。
这句话听着虚，落到实际就是三条硬规则：
- 内部的浮动元素会参与这块区域的高度计算，所以父元素不会被浮动子元素"撑破"；
- 这块区域不会和外面的浮动元素重叠；
- 同一个 BFC 内相邻块级盒子的 margin 会合并，不同 BFC 之间不会。
记住这三条，后面所有应用场景都是它们的推论。
第二步：怎么触发 BFC
不是随便一个 div 都是 BFC。常见的触发方式：
/* 1. 根元素 */
html
/* 2. 浮动（元素会脱离文档流，慎用） */
float: left | right;
/* 3. 绝对/固定定位（同样脱流） */
position: absolute | fixed;
/* 4. overflow 不是 visible */
overflow: hidden | auto | scroll | clip;
/* 5. 行内块、表格单元格等 */
display: inline-block | table-cell | table-caption;
/* 6. flex / grid 的直接子项自动成为 BFC */
display: flex | grid;
/* 7. 最干净的写法：专为触发 BFC 而生 */
display: flow-root;
/* 8. 其他 */
contain: layout | content | paint;
column-span: all;
注意：触发方式是手段，不是目的。float 和 position: absolute 虽然能触发 BFC，但会改变元素的文档流位置，只在本来就需要的场合用；单纯想清浮动，优先 display: flow-root。
第三步：场景一——清除浮动，父元素高度塌陷
子元素一浮动，父元素高度就变成 0，这是最经典的翻车现场：
<div class="parent">
<div class="child" style="float:left;height:100px;width:100px;"></div>
</div>
<!-- .parent 高度为 0，后面的内容会顶上来 -->
因为 BFC 计算高度时会包含浮动子元素，给父元素加一个触发条件即可：
.parent { display: flow-root; }
/* 老项目兼容写法：overflow: hidden; */
注意：overflow: hidden 会把超出父元素的内容裁掉，如果里面有下拉菜单、tooltip 或定位到外面的元素，就会被切掉。传统 clearfix（::after { content:''; display:block; clear:both; }）依然可靠；flow-root 更省事，但 IE 全系不支持，需要兼容 IE 就用 clearfix。
第四步：场景二——阻止 margin 合并
两个上下相邻的块级盒子，垂直 margin 会"取大值"合并；父子之间还会发生"margin 穿透"，子元素的上边距跑到父元素外面去。
.a { margin-bottom: 30px; }
.b { margin-top: 20px; }
/* 实际间距是 30px，不是 50px */
兄弟合并：把其中一个包进 BFC 容器。
<div class="wrap"><div class="b"></div></div>
<style>.wrap { display: flow-root; }</style>
父子穿透，给父元素加触发条件即可：
.parent { display: flow-root; }
/* 或 overflow: hidden; 或给父元素加 padding / border */
注意：margin 合并只发生在垂直方向、且是同一 BFC 内的块级盒子之间。浮动元素、绝对定位元素、行内块参与的 margin 不会合并——这正好从反面印证了"不同 BFC 不合并"。
第五步：场景三——两栏自适应布局
左边浮动固定宽度，右边想做自适应，如果右边不是 BFC，就会被浮动元素盖住一部分。
<div class="left">左侧 200px</div>
<div class="right">右侧自适应</div>
.left { float: left; width: 200px; }
.right { display: flow-root; } /* 触发 BFC，不与浮动重叠 */
右侧会自动贴着左浮动元素的边缘，宽度撑满剩余空间，不用写 calc，也不用负 margin 硬凑。
注意：如果你要的就是文字环绕图片的效果，那就别给文字块加 BFC——一旦加了，整块文字会被挤到一边，不再环绕。
第六步：BFC 管不了什么
- 它管不了水平方向的 margin 合并，因为水平方向本来就不合并；
- 它不能阻止
position: absolute 元素脱流后的重叠；
display: flex 的子项是 BFC，但容器本身不是；flex 布局里也不会发生 margin 合并；- 它不解决层叠上下文（z-index）问题，那是另一套机制。
小结
- BFC 是一块独立布局区域，核心三条：包含内部浮动、不与外部浮动重叠、内外 margin 各自合并。
- 触发方式里
display: flow-root 最干净、副作用最小；overflow: hidden 兼容性好但会裁剪内容；float 和绝对定位会脱流，别为了触发而触发。
- 三个最常用场景：清浮动防塌陷、隔离 margin 合并、做"浮动 + 自适应"的两栏布局。
- 判断该不该加 BFC 时，默念"不同 BFC 之间互不影响"这一句，基本不会错。
正式会员
认证极客
见习用户
