display: flow-root通过创建BFC使父容器重新包含浮动子元素高度，不裁剪内容、无副作用；而clearfix失效常因content缺失或display未设为table/block。
display: flow-root 是怎么解决塌陷的
它不是“清除”浮动，而是让父容器变成一个独立的 BFC（块级格式化上下文），浏览器自然把浮动子元素的高度纳入计算范围。这和 overflow: hidden 触发 BFC 的原理一致，但 flow-root 是 W3C 明确定义的语义化方式，只做这一件事：包裹浮动，不附带裁剪、滚动或层叠上下文干扰。
为什么 clearfix::after 容易失效
伪元素方案依赖两个关键条件同时成立，漏一个就归零：
-
content: ""缺失或写成content: " "（带空格）→ 伪元素不生成盒模型 -
display没设成table或block→ 伪元素默认是 inline，clear: both对它无效 - 父容器本身是
display: flex或display: grid→ 浮动被忽略，清除逻辑完全不参与布局计算
flow-root 的隐性影响必须提前确认
它不是“无感替换”，两个点常被跳过检查：
-
margin折叠会重置：父容器和第一个/最后一个子元素之间不再自动合并外边距，可能让标题和段落间距突然变大 - 继承链被切断：
font-size、line-height等不再从父级继承，而是回退到:root值，老项目里文字可能莫名变小 - 如果父元素已设
display: flex、grid、inline-block，flow-root会被覆盖——CSS 只认最后一个有效的display值
@supports 降级要避开 overflow: hidden
需要兼容 IE11 或极旧环境时，别用 overflow: hidden 当 fallback：
立即学习“前端免费学习笔记（深入）”；
- 它会裁剪
position: absolute子元素（比如下拉菜单、Tooltip、阴影），移动端尤其危险 - 某些 Safari 旧版本中还可能意外裁掉
box-shadow或 transform 位移后的视觉区域 - 推荐写法：
@supports not (display: flow-root) { .container::after { content:""; display: table; clear: both; } }
真正容易被忽略的是：flow-root 改变的是盒模型行为，如果项目里有 JS 直接读取 offsetHeight 或监听高度变化，原有逻辑可能返回错误值——这不是样式问题，是渲染模型变了。
