display: flow-root能撑开父容器高度，是因为它显式创建BFC，使父容器重新纳入浮动子元素的布局边界；与overflow: hidden原理相同，但无裁剪、滚动等副作用。
直接写 display: flow-root 就能清除浮动，前提是父容器没被其他 display 值覆盖、不需兼容 IE11、且没和 contain 冲突。
为什么 display: flow-root 能撑开父容器高度
浮动元素脱离文档流，父容器“看不见”它们的高度——根本原因是没形成 BFC（块级格式化上下文）。display: flow-root 的作用就是显式创建一个独立的 BFC 容器，让父容器重新计算内部浮动子元素的布局边界。
它和 overflow: hidden 触发 BFC 的原理一致，但只做这一件事：包裹浮动，不附带任何渲染副作用。
-
overflow: hidden会裁剪溢出内容（比如box-shadow、下拉菜单、position: absolute元素） -
display: flow-root不影响溢出可见性，也不改变滚动行为 - 它会重置外边距合并（margin collapse）——父容器和第一个/最后一个子元素之间不再发生外边距合并，这点容易被忽略
display: flow-root 失效的常见原因
它不是加了就一定生效。浏览器按规范只认最后一个有效的 display 值，冲突时会被静默忽略。
立即学习“前端免费学习笔记（深入）”；
- 父元素已设
display: flex、display: grid、display: inline-block等——这些值与flow-root互斥 - 项目需兼容 IE11 或更老浏览器——
flow-root完全不支持，必须用@supports (display: flow-root) {}包裹或保留 fallback - 父元素同时用了
contain: layout或contain: paint——可能抑制 BFC 行为，导致高度仍塌陷 - 旧项目中 JS 依赖
offsetHeight动态读取父容器高度——flow-root改变了盒模型，原有逻辑可能返回错误值
和伪元素 ::after 清除法的实际差异
两者都能撑开高度，但底层机制和维护成本不同：
- 伪元素方案（如
.clearfix::after）依赖content: ""+clear: both，必须配display: table或display: block才生效；漏写display是线上常见失效原因 -
display: flow-root是单行声明，写在父元素上即可，没有生成额外节点，不影响可访问性（ARIA、屏幕阅读器） - 伪元素方案在某些场景下可能被全局 CSS 重置规则意外清空
content；flow-root是display值，稳定性更高 - 若父元素本身需要
display: flex或display: grid，就不能再设flow-root，此时得退回到 BFC 方案
真正容易被忽略的是：浮动本身已基本被 flex 和 grid 取代，但清除浮动的问题仍会在维护老项目、处理第三方组件或特定排版（如图文环绕）时突然出现——这时候选错方法，往往不是布局错位，而是引发更隐蔽的交互或可访问性问题。
