HTML5 不提供创建 BFC 的新语法，BFC 是 CSS 渲染规范概念；触发方式包括 display: flow-root（推荐）、overflow: hidden/auto/scroll、display: flex/grid/table-cell 等，但需注意兼容性与副作用。
HTML5 本身不提供“创建 BFC”的新语法，BFC（Block Formatting Context）是 CSS 渲染规范中的概念，与 HTML5 版本无关。能否触发 BFC，取决于你给元素设置的 display、position、float、overflow 等 CSS 属性，而不是 HTML5 标签本身。
哪些 CSS 属性能触发 BFC？
只有满足特定条件的元素才会形成独立的块格式化上下文，从而隔离内部布局（如防止 margin 合并、包裹浮动子元素等）。常见可靠触发方式包括：
-
overflow值为hidden、auto或scroll（注意：visible不触发） -
display值为flow-root（推荐，语义清晰且无副作用） -
display值为table-cell、table-caption、inline-block、flex、grid、ruby -
position值为absolute或fixed -
float值为left或right（但 float 元素自身会脱离文档流，通常不用于“包裹”目的）
为什么优先用 display: flow-root？
这是现代 CSS 中最干净的 BFC 触发方式，专为此设计，没有副作用。相比 overflow: hidden，它不会意外裁剪内容或禁用滚动；相比 display: inline-block，它保持块级特性（如自动撑满父容器宽度）。
/* 推荐：显式、安全、无副作用 */
.container {
display: flow-root;
}
<p>/<em> 对比：可能隐藏溢出内容或影响交互 </em>/
.bad-example {
overflow: hidden;
}注意：flow-root 在 IE 中完全不支持，若需兼容 IE，只能退回到 overflow: hidden 或 display: inline-block（并手动设 width: 100%）。
立即学习“前端免费学习笔记（深入）”；
常见误用场景：浮动清除 vs BFC 触发
很多人想“清除浮动”，却错误地以为只要给父容器加 overflow: hidden 就是“清浮动”。其实它只是**意外触发了 BFC**，而 BFC 的包容性让父容器重新计算高度，看起来像清除了——但这不是清除机制，是渲染规则的结果。
- 真正语义化的清除方式是使用
::after伪元素 +clear: both -
display: flow-root也能让父容器包含浮动子项，但它不“清除”浮动，只是让父容器参与 BFC 布局 - 如果子元素同时有
float和margin，BFC 可防止 margin 合并，但不会改变 float 的定位行为
BFC 不是万能的布局工具
它解决的是特定渲染边界问题（如浮动塌陷、margin 折叠、文字环绕），不是用来替代 Flexbox 或 Grid 的布局方案。滥用 overflow: hidden 触发 BFC 可能导致：
- 下拉菜单、弹层、Tooltip 被意外裁剪
- 滚动区域失效（比如内部有横向滚动的内容）
- 无障碍阅读器对截断内容的理解异常
遇到布局异常时，先确认是否真需要 BFC —— 很多时候用 display: flex 或明确的 height 更直接。BFC 是底层渲染规则，不是布局 API。
