display: flow-root 是最干净的清除浮动方案，它通过创建BFC解决父容器高度塌陷，不裁剪溢出、不触发滚动、不干扰定位；但与flex/grid等display值冲突、不兼容IE11、可能受contain属性影响，且会重置外边距合并。
display: flow-root 是目前最干净、最语义化的清除浮动方案，只要浏览器支持（Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+），它就能直接解决父容器高度塌陷，且不裁剪溢出、不触发滚动、不干扰定位包含块。
为什么 display: flow-root 能撑开父容器高度
浮动元素脱离文档流，父容器“看不见”它们的高度——根本原因是父容器没形成 BFC（块级格式化上下文）。display: flow-root 的作用就是显式创建一个独立的 BFC 容器，让父容器重新计算内部浮动子元素的布局边界。它和 overflow: hidden 触发 BFC 的原理一致，但只做这一件事：包裹浮动，不附带任何渲染副作用。
哪些场景下 display: flow-root 会失效
它不是写上去就一定生效，得看父元素当前的 display 值和其他规则是否冲突：
- 父元素已设
display: flex、display: grid、display: inline-block等——这些值与flow-root互斥，浏览器只认最后一个声明，flow-root被忽略 - 项目需兼容 IE11 或更老浏览器——
flow-root完全不支持，必须加@supports (display: flow-root) {}包裹，或保留 fallback - 父元素同时用了
contain: layout或contain: paint——可能抑制 BFC 行为，导致高度仍塌陷 - 旧项目中 JS 依赖
offsetHeight动态读取父容器高度——flow-root改变了盒模型，原有逻辑可能返回错误值
和 overflow: auto 比，flow-root 真的更安全吗
是的，但安全的前提是你清楚它改了什么：
立即学习“前端免费学习笔记（深入）”；
-
overflow: auto可能意外出现滚动条、截断box-shadow、压住下拉菜单；flow-root不影响溢出可见性，也不改变滚动行为 -
flow-root会重置 margin collapse——父容器和第一个/最后一个子元素之间不再发生外边距合并，这点容易被忽略 - 在某些嵌套 flex 容器里，
overflow: auto可能让min-height失效，而flow-root下高度计算更可预测 - 两者都不触发重排（reflow），但旧版 Chrome 中
overflow: auto曾有布局计算抖动问题，flow-root没这风险
要不要立刻把所有 clearfix 全换成 flow-root
别批量替换。先确认浮动是否还在承担真实布局职责：
- 纯装饰性浮动（如文字环绕图片）——保留
float，它仍是语义最准的方案 - 用浮动模拟两栏布局（左固定宽 + 右自适应）——该迁移到
display: flex或grid，而不是换一种清浮动方式 - 浮动 +
margin模拟间隙——极易因缩放、字体加载错位，必须重构，不能只靠清浮动“兜底”
真正该警惕的是那些靠 JS 动态读取高度、或依赖全局 CSS 重置规则（比如清空了所有 ::after 的 content）的旧逻辑——flow-root 看似简单，但会悄悄绕过这些隐性假设。
