BFC（块级格式化上下文）

定义

BFC（Block Formatting Context，块级格式化上下文）是 CSS 视觉渲染中的一块独立布局区域，内部的块级盒按规则垂直排列，且该区域的布局与外部互不影响。

创建条件

常见方式包括：根元素；float 不为 none；position 为 absolute 或 fixed；display 为 inline-block、table-cell、flow-root；overflow 不为 visible 等。其中 flow-root 是专为创建 BFC 设计的无副作用写法。

特性与应用

• 内部浮动元素参与高度计算，可解决「浮动导致父容器高度塌陷」问题；
• BFC 区域不与浮动元素重叠，可实现两栏自适应布局；
• 属于不同 BFC 的相邻元素外边距不会合并，可阻止 margin collapse。

相关概念

与之对应的还有 IFC（行内）、FFC（弹性）与 GFC（网格）等格式化上下文。BFC 是前端面试与布局排障中的高频知识点。