display: flow-root是现代解决浮动塌陷的首选方案，一行代码显式创建bfc使父容器包含浮动子元素，不裁剪内容、不干扰布局；clear: both加在父元素上无效，因它仅控制自身位置而非子元素高度计算。
直接用 display: flow-root，现代项目里一行代码就能根治，不用清浮动、不裁剪弹层、不干扰子项排布逻辑。
为什么 clear: both 加在父元素上完全没用
因为 clear 控制的是「自身位置」，不是「子元素高度计算」。给 .parent { clear: both; } 写上去，只会在它前面有浮动兄弟时换行，对内部浮动子项毫无感知——子项照常脱离文档流，父容器高度还是 0。
真正起效的清除动作，必须出现在浮动子项之后、且仍在同一父容器内的块级元素上。伪元素 ::after 能模拟这个位置，但前提是它得渲染出来：
-
content: ""缺失 → 伪元素不生成 →clear形同虚设 -
display没设成table或block→ 伪元素是行内级 →clear: both对它无效 - 父容器本身有
overflow: hidden或transform→ 可能干扰伪元素的清除行为
display: flow-root 是什么，为什么比 overflow: hidden 更安全
display: flow-root 是 W3C 明确定义的 BFC 触发方式，专为解决浮动塌陷而生。它语义化地告诉浏览器：“请把这个容器当作一个独立的格式化上下文来处理”，而不是靠副作用“碰巧”生效。
对比 overflow: hidden：
-
overflow: hidden会裁剪所有溢出内容：下拉菜单、position: absolute弹层、box-shadow、负margin装饰、transform动画中移出边界的区域，全被切掉 -
display: flow-root不改变子元素排布逻辑：float子项照常浮动，其他子项仍按 normal flow 渲染
兼容性已足够好：Chrome 64+ / Firefox 58+ / Safari 15.4+ / iOS 15.4+，2026 年绝大多数生产环境可直接使用。
哪些情况还必须手写 .clearfix::after
只有两类真实场景绕不开：
- 需要兼容 IE11 或更老浏览器（比如政务/银行内网系统）
- 对接无法修改的第三方 HTML 输出（例如 CMS 生成的固定结构，你只能加
class不能动 DOM）
标准写法三要素缺一不可：
-
content: ""—— 不写就等于没生成伪元素 -
display: table—— 比block更稳妥，避免旧版 IE 的 margin 双倍问题，且天然触发 BFC 边界 -
clear: both—— 强制伪元素落到所有浮动子项下方，从而撑开父高
嵌套浮动结构中，每一级「直接包裹浮动子项」的容器都得单独加 .clearfix；外层加了，内层不会自动继承。
最容易被忽略的点：你可能根本不需要清除浮动——如果父容器已经是 display: flex 或 display: grid，它天然具备包含浮动子项的能力，float 在这种上下文中实际已退化为一种定位辅助手段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
