display: flow-root是当前最安全的清除浮动方案，它通过显式创建BFC使父容器重新包含浮动子元素，不裁剪溢出内容、不干扰布局，Chrome 64+/Firefox 58+/Safari 15.4+全面支持。
直接用 display: flow-root，现代项目里一行就能解决，不用 hack、不裁剪内容、不干扰子元素布局。
为什么 clear: both 加在父元素上完全没用
clear 只控制「自身」避开浮动，不是让父容器去感知子项高度。给 .parent { clear: both; } 写上去，它只会在前面有浮动兄弟时换行，对内部浮动子元素毫无影响——父容器依然看不见它们，高度还是 0。
真正起效的 clear: both 必须出现在浮动子元素之后、且仍在同一父容器内的块级兄弟元素上。比如：
<div class="float-left"></div> <div style="clear:both"></div>
但这种写法要改 HTML，污染结构，调试难追溯。
立即学习“前端免费学习笔记（深入）”；
.clearfix::after 必须同时满足三项才生效
伪元素清除浮动不是“写了就灵”，漏掉任意一项都会失效：
-
content: ""—— 不写就等于没生成伪元素，DevTools 默认不显示，需手动开启“Show user agent shadow DOM”才能看到 -
display: table—— 比display: block更稳妥：能避免 IE6/7 的 margin 双倍问题，且天然触发 BFC 边界 -
clear: both—— 核心动作，强制伪元素落到所有浮动子项下方
常见错误写法：.clearfix::after { content: ""; clear: both; } —— 缺 display，伪元素是行内级，clear 对它无效。
display: flow-root 是当前最安全的解法
它是 W3C 明确定义的 BFC 触发方式，专为解决这类问题而生，语义清晰、零副作用：
- 不裁剪任何溢出内容：下拉菜单、
position: absolute弹层、box-shadow、负 margin 装饰全保留 - 不改变子元素排布逻辑：浮动子项照常浮动，其他子项仍按 normal flow 渲染
- Chrome 64+ / Firefox 58+ / Safari 15.4+ / iOS 15.4+ 全支持，2026 年绝大多数生产环境可直接落地
- 兼容性兜底可用
@supports，例如：.container { display: flow-root; } @supports not (display: flow-root) { .container { overflow: hidden; } }
注意：display: flow-root 只对含 float 子项的容器有效；如果父容器已是 display: flex 或 display: grid，子元素的 float 会直接失效，此时加 flow-root 不仅无用，还会干扰调试。
最容易被忽略的一点：问题根源往往不在“怎么清”，而在“为什么还在用 float 做布局”——如果只是为了让子元素横排，flex 或 grid 才是现代解法，高度塌陷根本不会发生。
