display:flow-root 是专为创建BFC而设计的display值，能安全清浮动且无溢出裁剪等副作用，Chrome64+/Firefox59+/Safari15.4+支持，IE不支持需fallback。
display:flow-root 是什么，为什么能替代 overflow:hidden 清浮动
它是个专门用来创建 BFC 的 display 值，不带副作用——不像 overflow:hidden 会裁剪溢出、影响滚动或隐藏阴影，也不像 float:left 会脱离文档流。display:flow-root 就是“我只建 BFC，其他啥也不动”，语义干净，浏览器支持也稳（Chrome 64+/Firefox 59+/Safari 15.4+）。
常见错误现象：用 overflow:hidden 清浮动后，发现下拉菜单被截断、position:fixed 元素定位异常、或者 box-shadow 看不见了——这些都不是清浮动本身的问题，是 overflow 的副作用在捣鬼。
- 旧方案
overflow:hidden强制触发 BFC，但同时限制了内容溢出行为 -
display:flow-root是唯一专为此设计的 display 值，无附带行为 - IE 完全不支持，如果还要兼容 IE11，得 fallback 到
zoom:1或::after伪元素清除法
伪元素清除法（::after）和 flow-root 该怎么选
伪元素清除法本质是靠生成一个块级、清除两侧浮动的节点，它不依赖 BFC，所以兼容性极好；display:flow-root 是更现代、更直接的 BFC 创建方式，代码量少、意图明确。
使用场景差异明显：
立即学习“前端免费学习笔记（深入）”；
- 需要支持 IE8–IE11？必须用
::after+clear:both，别犹豫 - 项目已放弃 IE，且父容器本身不需要特殊 display 行为（比如不能是
inline或table-cell）？优先写display:flow-root - 父容器已经是
flex或grid容器？那它天然就是 BFC，根本不用清浮动——这点常被忽略
示例对比：
旧写法：
.container::after { content: ""; display: table; clear: both; }新写法：
.container { display: flow-root; }
哪些 display 值会触发 BFC，flow-root 在其中什么位置
BFC 触发条件不止一个，但不是所有都能“安全清浮动”。比如 float:left 虽然触发 BFC，但会让自身脱离流；position:absolute 同样脱离流；display:inline-block 会带来额外的基线对齐问题。
display:flow-root 的特别之处在于：它是唯一一个 display 值，既强制创建 BFC，又保持块级盒模型、不改变布局上下文、不引入对齐或定位副作用。
- 会触发 BFC 的 display 值包括：
flow-root、table-cell、table-caption、flex、grid、inline-flex、inline-grid - 其中只有
flow-root和block（默认）语义一致：都是正常流中的块级容器 -
display:block本身不触发 BFC，除非加了overflow、float等附加条件
实际开发中容易漏掉的 BFC 边界问题
BFC 不是开关，它有明确的边界范围。一个常见疏忽是：以为给某个父元素设了 display:flow-root，就能“全局清浮动”，结果子元素浮动仍影响外部兄弟元素——因为 BFC 只隔离内部浮动对**外部**的影响，不解决内部浮动导致的**自身高度塌陷**以外的问题。
换句话说：display:flow-root 解决的是“父容器包不住浮动子元素”的高度塌陷，而不是“浮动子元素跑出父容器去撞隔壁元素”——后者得靠合理布局结构或清除本身。
- 浮动元素若没被任何 BFC 容器包裹，它依然会参与外部块格式化上下文的布局计算
- 多个嵌套浮动时，只在外层设
flow-root不够，中间层若未建立 BFC，浮动仍可能穿透影响 - 使用
display:flow-root后，检查 computed style 中的display是否真的生效（某些 CSS 预处理器或框架可能覆盖该声明）
真正要盯住的，从来不是“用了没”，而是“作用域对不对”、“边界包住了没有”。
