标准答案
- BFC 是 Block Formatting Context，中文叫块级格式化上下文，可以理解成一个独立的块级布局环境。
- BFC 内部的块盒按规则垂直排列，内部布局不会随便影响外部，外部浮动也不会侵入它的布局区域。
- BFC 常用来包含内部浮动，解决父元素高度塌陷。
- 它也能阻止 margin 折叠，并让元素避开旁边的浮动元素。
- 常见触发方式有 display: flow-root、overflow 不为 visible、inline-block、table-cell、flex/grid item、absolute/fixed。现代代码里只想创建 BFC 时，优先用 display: flow-root。
题目解析
这题不要背一长串触发条件，而要先说明 BFC 解决什么布局问题。面试官通常想看你是否真的遇到过浮动、高度塌陷和 margin 折叠。
BFC 不是万能布局方案。现代页面更常用 flex、grid，但 BFC 对理解旧布局和 CSS 规则仍然很重要。
代码示例
display: flow-root 可以让父元素包含内部浮动。
CSS
.card {
display: flow-root;
}
.cover {
float: left;
width: 120px;
height: 80px;
}常见误区
- 只背触发条件，不知道 BFC 解决父元素高度塌陷和 margin 折叠。
- 所有场景都用 overflow: hidden 创建 BFC，结果内容或阴影被裁剪。
- 把 BFC 和层叠上下文混为一谈。BFC 处理布局流，层叠上下文处理绘制层级。