display: flow-root 是解决浮动导致父容器高度塌陷最干净、语义化的方案，它通过创建BFC使父容器包含浮动子元素尺寸，不裁剪内容、无副作用，现代浏览器支持良好。
display: flow-root 是目前解决浮动导致父容器高度塌陷最干净、最语义化的方案，它专为此场景设计，不裁剪内容、不干扰定位，现代浏览器支持已非常可靠。
为什么 display: flow-root 能撑开父容器
它不是“撑开”，而是创建一个新的 BFC（块级格式化上下文），让父容器重新把浮动子元素纳入自身高度计算范围。浮动元素本身仍脱离普通文档流，但 BFC 容器会主动包含它们的尺寸——这和 overflow: hidden 触发 BFC 的原理一致，但没有副作用。
常见错误现象：父容器 height 计算为 0、背景色/边框不可见、后续兄弟元素向上塌陷。
- 必须作用在**直接包裹浮动子元素的父容器**上，不能加在更外层或子元素上
- 如果父容器本身是
position: absolute或设置了height/max-height，flow-root也无能为力——它只影响高度计算逻辑，不覆盖显式尺寸限制 - 和
flex/grid不冲突，但没必要混用；一旦用了后者，浮动本身已失效，清除就多余了
display: flow-root 和 overflow: hidden 的关键区别
两者都触发 BFC，但行为完全不同：
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden会裁剪所有超出父容器的内容，比如position: absolute的下拉菜单、transform偏移的 tooltip、甚至box-shadow都可能被吞掉 -
display: flow-root只改变容器内部的高度计算方式，完全不影响溢出表现、层级关系或定位基准 - 在 Safari 中，
overflow: hidden+touchmove可能引发滚动卡顿；flow-root无此问题 - 代码量更少：
.container { display: flow-root; }一行搞定，无需伪元素或额外类名
兼容性与降级策略
display: flow-root 在 Chrome 58+、Firefox 53+、Safari 15.4+、Edge 79+ 中均原生支持；IE 完全不支持。
- 如需兼容 IE，不要硬套
@supports回退到overflow: hidden—— 它可能意外截断内容；推荐搭配标准.clearfix类使用 - 可写成：
.container { display: flow-root; } @supports not (display: flow-root) { .container { /* 仅当不支持时才启用 clearfix */ &::after { content: ""; display: table; clear: both; } } } - 注意：PostCSS 的
autoprefixer默认不补flow-root，它不属于需要前缀的属性，无需配置
容易被忽略的失效场景
即使写了 display: flow-root，父容器仍没高度？先检查这几个点：
- 子元素是否同时用了
position: absolute或display: none—— 它们也脱离文档流，flow-root无法包含它们 - 父容器是否被其他规则覆盖了
display，比如某个组件库的 CSS 把它重置成了display: block - 开发者工具中查看 computed
display值，确认确实是flow-root，而不是被 cascade 覆盖掉了 - 多个浮动叠加（比如浮动 +
transform+filter）可能触发新层叠上下文，此时需回归布局模型重构，而非依赖清除技巧
真正该警惕的，不是怎么“清浮动”，而是为什么还在用浮动——flow-root 是过渡期的好帮手，但长期项目里，用 flex 或 grid 替代浮动才是根治之法。
