什么是 BFC？它能解决哪些布局问题？

简化版

BFC 是块级格式化上下文，可以理解为一块独立布局区域，里面的元素布局不会影响外部。它常用来清除浮动、防止 margin 折叠、避免文字环绕浮动元素。

详细版

BFC 的全称是 Block Formatting Context。触发 BFC 的常见方式有：

根元素 html。
浮动元素：float 不为 none。
绝对定位元素：position: absolute/fixed。
overflow 不为 visible，如 overflow: hidden。
display: flow-root。
flex/grid 容器的子元素等。

BFC 的常见作用：

清除浮动，让父元素包住浮动子元素。
阻止父子或兄弟元素的垂直 margin 折叠。
让普通块盒不与浮动盒重叠。

现代开发更推荐用 display: flow-root 创建 BFC，因为它语义明确，不像 overflow: hidden 可能误伤阴影、下拉层或滚动内容。

完整版教学

一、BFC 的本质是独立布局环境

浏览器布局不是所有元素混在一个大池子里算。某些元素会形成独立上下文，内部块级盒按自己的规则排列，外部只把这个上下文当成一个整体。

BFC 内部有几个关键规则：块级盒从上到下排列；同一个 BFC 内相邻块级盒的垂直 margin 会折叠；BFC 区域不会和浮动元素重叠；计算 BFC 高度时会包含内部浮动元素。

这些规则听起来抽象，但它们正好对应面试里最常见的布局问题。

二、为什么 BFC 可以清除浮动

浮动元素会脱离普通文档流，所以父元素如果只包含浮动子元素，父元素高度可能塌陷。

.parent {
  display: flow-root;
}
.child {
  float: left;
}

当父元素创建 BFC 后，计算父元素高度时会把内部浮动元素算进去，父元素就能包住子元素。

以前常用 clearfix 伪元素清浮动，本质也是让父元素内部产生一个能参与布局的清除元素。现代 CSS 下，如果只是为了建立新的块格式化上下文，flow-root 更直观。

三、BFC 和 margin 折叠

同一个 BFC 中，相邻块级元素的垂直 margin 会折叠。父元素和第一个子元素之间也可能折叠，导致子元素的 margin-top 作用到父元素外面。

如果父元素创建新的 BFC，父子之间不再处于同一个普通块格式化上下文里，就可以阻止这种折叠。

.card {
  display: flow-root;
}
.card-title {
  margin-top: 20px;
}

这时标题的上边距会留在卡片内部，而不是把卡片整体推开。

四、BFC 和浮动环绕

浮动元素会让普通文本环绕它。如果右侧内容创建 BFC，它的区域不会与浮动元素重叠，就能形成经典的两栏布局。

.aside {
  float: left;
  width: 200px;
}
.main {
  overflow: hidden;
}

不过今天更建议用 flex/grid 写两栏。理解 BFC 是为了读懂老代码和回答原理，不代表新项目还应该优先使用浮动布局。

五、面试追问与工程落地

面试官常追问 BFC 的触发方式，这时不要只背 overflow: hidden。更推荐把触发方式按意图区分：如果只是要创建独立块格式化上下文，现代 CSS 可以用 display: flow-root；如果本来就要做滚动裁剪，用 overflow: auto/hidden；如果布局本来就是 flex/grid，也会形成相关格式化上下文。

还要注意 overflow: hidden 的副作用。它会裁剪溢出内容，可能把阴影、下拉菜单、浮层切掉。所以它不是万能清浮动方案。老项目里常见，面试能指出副作用会更有工程感。

如果被问“BFC 能不能解决所有 margin 问题”，答案是否定的。它能处理父子 margin 折叠、浮动影响等特定问题，但现代布局中 Flex/Grid 已经减少了很多 BFC 使用场景。理解 BFC 是为了知道浏览器为什么这样排版，而不是为了所有布局都硬套 BFC。

六、用可计算案例判断 BFC 是否解决了问题

假设父盒只有两个左浮动子项，宽度分别为 120px 和 180px，高度分别为 60px 和 100px。浮动不参与普通流高度计算时，父盒的自动高度可能是 0px；父盒建立 BFC 后，内部浮动参与其高度计算，父盒内容高度至少会覆盖最高的 100px 子项。这里解决的是浮动包含问题，不是把所有脱离文档流的元素都重新算进高度：绝对定位子元素仍不参与普通流尺寸。

外部 BFC
├─ float: 120 × 60
└─ float: 180 × 100
   建立 BFC 的父盒高度 → 至少 100px

需求	推荐方案	原因或代价
仅建立新的 BFC	`display: flow-root`	意图明确，不裁剪内容
本来就需要滚动	`overflow: auto`	同时建立 BFC，但可能出现滚动条
本来就需要裁剪	`overflow: hidden`	会裁掉阴影、浮层和溢出内容
现代一维或二维布局	Flex / Grid	直接表达布局，不必借浮动实现

面试判断 BFC 时要把“触发条件”和“要解决的布局机制”对应起来；仅背一串属性，无法解释为什么方案有效以及有什么副作用。

七、常见误区与追问

误区：BFC 会让内部所有布局都与外界完全隔绝。 BFC 主要约束块布局、浮动和 margin 折叠，盒子尺寸仍会参与父级布局，继承和层叠也不会因此消失。
误区：给父元素写 overflow: hidden 永远是最佳清浮动方案。 它虽然能建立 BFC，却可能裁剪阴影、菜单和提示层，只为建立 BFC 时通常优先 flow-root。
误区：建立 BFC 后任意两个垂直 margin 都不会折叠。 BFC 边界能阻止跨边界折叠，但该 BFC 内部相邻普通块的垂直 margin 仍可能折叠。
追问：BFC 为什么能包含浮动？ 建立 BFC 的盒子计算自动高度时会考虑其内部浮动，因此不会出现只有浮动子项时的典型高度塌陷。
追问：BFC 为什么能避开外部浮动？ 新 BFC 的边界不会与同一块格式化上下文中的浮动盒重叠，剩余可用宽度会据此计算。
追问：绝对定位元素能靠 BFC 撑开父元素吗？ 不能，绝对定位盒属于脱离文档流的定位布局，建立 BFC 不会把它变回普通流项目。
追问：Flex 或 Grid 项目还需要手动建立 BFC 吗？ 项目自身通常会建立独立格式化上下文，但是否使用 flow-root 仍应由内部浮动、裁剪等具体需求决定。

八、加强记忆

BFC 可以记成“独立包间”：包间里面怎么排，尽量不打扰外面；里面的浮动会被包间算高度；外面的浮动也不会压进包间。面试答题时把它和三个场景绑定：清浮动、阻止 margin 折叠、避免浮动覆盖。

简化版

详细版