display: flow-root 能替代传统 clearfix，因为它显式创建 BFC，使父容器正确计算浮动子元素高度，且不裁剪溢出内容、无副作用；现代浏览器已广泛支持，但需注意 display 值互斥、IE 兼容性及与其他 CSS 规则的冲突。
直接用 display: flow-root 就能替代传统 clearfix，无需伪元素、空标签或 overflow 黑魔法，且语义干净、无副作用。
为什么 flow-root 能解决高度塌陷
浮动元素脱离文档流，父容器无法感知其高度——本质是父容器没形成 BFC（块级格式化上下文）。display: flow-root 的作用就是**显式创建一个独立的 BFC 容器**，让父容器重新“看见”内部浮动子元素，并正确计算高度。
它和 overflow: hidden 触发 BFC 的原理一致，但关键区别在于：flow-root 不影响溢出内容的可见性，也不强制滚动行为。
-
overflow: hidden会裁掉超出边界的阴影、下拉菜单、定位元素 -
display: flow-root只做一件事：包裹浮动，不干涉渲染表现 - 所有现代浏览器（Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+）已原生支持
flow-root 和伪元素 clearfix 的实际差异
两者都能撑开父容器，但实现路径和维护成本不同：
立即学习“前端免费学习笔记（深入）”；
- 伪元素方案（如
.clearfix::after）依赖content: ""+clear: both，需额外 class、兼容 IE 时还得加*zoom: 1 -
flow-root是单行声明，写在父元素上即可，没有生成额外节点，不影响可访问性（ARIA、屏幕阅读器） - 伪元素方案在某些场景下可能被 CSS 重置规则意外覆盖（比如全局清除了
::after的content）；flow-root是 display 值，稳定性更高 - 若父元素本身需要
display: flex或display: grid，就不能再设flow-root（display 值互斥），此时得退回到 BFC 方案
哪些情况不能直接换用 flow-root
它不是万能银弹，遇到以下情形要小心：
- 父元素已设置
display: inline-block/table-cell/flex/grid—— 这些值会覆盖flow-root，浏览器按规范只认最后一个有效值 - 需要兼容 IE11 或更老浏览器（
flow-root完全不支持），必须保留 fallback（例如用@supports包裹） - 父容器同时设置了
contain: layout或contain: paint，可能与flow-root的 BFC 行为冲突，导致布局异常 - 旧项目中父元素高度靠 JS 动态计算（比如监听子元素 offsetHeight），
flow-root改变了盒模型行为，JS 逻辑可能失效
推荐的渐进增强写法
兼顾兼容性与简洁性，可以这样写：
.parent {
/* fallback for older browsers */
overflow: hidden;
}
@supports (display: flow-root) {
.parent {
display: flow-root;
overflow: visible; /* 覆盖上面的 hidden */
}
}这种写法在支持的浏览器里生效 flow-root，不支持的回退到 overflow: hidden。注意别把 @supports 写成 @support（少个 s 就无效）。
真正容易被忽略的是：很多团队以为加了 flow-root 就一劳永逸，却忘了检查父元素是否被其他 CSS 规则（比如重置样式表里的 display: block !important）强行覆盖——建议在 DevTools 的 Computed 面板里直接看最终生效的 display 值。
