先记住这个答案
创建 BFC 的常见方式包括：设置 float 为 left/right、overflow 为 hidden/auto/scroll、display 为 flow-root、inline-block、table-cell 等，以及 position 为 absolute/fixed。BFC 能包含内部浮动，使父容器高度不会塌陷；也能让元素避开外部浮动，不会与之重叠；还能阻断相邻元素外边距的穿透。推荐使用 display: flow-root，它专为此设计且无副作用。
- float、overflow、flow-root 等均可建立 BFC。
- BFC 能包含内部浮动、排除外部浮动。
- BFC 阻止内部与外部之间的 margin 合并。
触发条件与隔离原理
BFC 的定义是“块级格式化上下文”，它规定内部块盒如何排列，并约束浮动元素的影响范围。常见的触发方式有：根元素（html）、float 非 none、position 绝对或固定、display 为 inline-block 或 flow-root、overflow 非 visible 和 clip、表格单元格等。只要元素满足任一条件，其内容就处于独立的 BFC 中。
独立的含义是：BFC 内部浮动不会伸出该区域，外部浮动也不会侵入该区域；同时，BFC 内相邻子元素的垂直外边距不会向外合并。这种隔离特性由 CSS 渲染模型保证，所以可以把它当作一个“迷你布局层”来使用。例如，给父容器加上 overflow: hidden，就能把其内浮动的子元素“关住”，从而撑起父容器高度。
清除浮动与阻挡外包：双栏布局案例
假设有一个卡片，内部有一张左浮动图片和文字段落，卡片未设固定高度，且卡片后还有下边的兄弟元素。若不给卡片建立 BFC，浮动图片会超出卡片底部，导致卡片高度塌陷，背景无法包裹图片，且后续内容可能上移贴住卡片。此时给卡片设置 display: flow-root，卡片立即形成 BFC，自动包含内部浮动，高度随内容撑开，背景完整覆盖。
再如相邻两个盒之间的 margin 合并：若上下两个兄弟元素各设 margin: 20px 0，实际间距只有 20px 而非 40px。若在第二个元素外加一层父元素并使其成为 BFC（如 overflow: hidden），BFC 会阻止内部元素的 margin 与外部兄弟元素的 margin 合并，因此两个兄弟的 margin 不再合并，间距变为两者之和，从而可控制间距。选择 flow-root 相比 overflow 无滚动条副作用，更安全。
.container {
display: flow-root;
border: 2px solid #333;
}
.floated {
float: left;
width: 100px;
height: 80px;
}
.text { margin-top: 10px; }当 .container 为普通块时，浮动子元素会溢出，高度塌陷；设为 flow-root 后，它创建 BFC，包含浮动子元素，高度正确包裹。
哪些情况会破坏或限制 BFC 效果
BFC 的作用不是万能的。比如用 overflow: hidden 建立 BFC 来清除浮动时，如果容器内有定位元素超出边界，overflow: hidden 会裁剪它们，造成内容不可见；同样，overflow: scroll/auto 可能产生不想要的滚动条。此外，当容器本身是弹性或网格容器时，它创建的是 flex/grid formatting context，不是 BFC，某些浮动隔离规则不再适用，但外部浮动排除仍有效。
另一个边界是，BFC 能包含内部浮动，但若 BFC 自身设置了固定高度且内部浮动更高，浮动内容仍可能溢出 BFC 的边界显示（BFC 不主动裁剪内容，除非 overflow 非 visible）。创建 BFC 的元素必须有正常文档流参与，若它自己也被浮动或定位，其父级仍需另行处理。实际布局中，优先用 display: flow-root，它不会产生裁剪或滚动副作用，兼容性已覆盖现代浏览器。
容易答错的地方
- 误以为清除浮动一定要用 overflow: hidden
- overflow: hidden 确实能创建 BFC 清除浮动，但它也会裁剪超出容器范围的内容，导致阴影或子元素被截断。更合适的是 display: flow-root，专门为此设计，无副作用。
- 误以为 BFC 能消除所有外边距合并
- BFC 只隔离内部与外部，但 BFC 内部相邻的兄弟元素之间仍会发生 margin 合并（如内部两个子元素上下边距会合并）。要消除兄弟间合并，需给每个子元素再包一层 BFC 或采用 padding/border 分隔。
面试官还会怎么问？
哪些 display 值能创建 BFC？inline-block 和 flow-root 有何区别？
display: inline-block、table-cell、flow-root 等都能建立 BFC。inline-block 同时使元素表现为行内级，可能产生空白间隙；flow-root 保持块级盒，创建 BFC 却无其他副作用，专为布局隔离设计。
BFC 与层叠上下文（stacking context）有什么关系？
二者是不同的概念。BFC 负责布局隔离（浮动、margin），层叠上下文负责 z 轴绘制顺序。某些属性（如 opacity、transform）会创建层叠上下文但不会创建 BFC。它们可同时存在，例如 float + opacity 两者都生效。
使用 overflow: auto 创建 BFC 会带来哪些常见问题？
overflow: auto 会生成滚动容器，若内容超出而容器高度固定，会显示滚动条；即使没有溢出，某些浏览器也可能保留滚动条位移空间。因此清除浮动时用 flow-root 更安全，但需要考虑兼容性（旧浏览器可用 overflow 替代）。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。