display: flow-root 是解决浮动塌陷最简洁有效的方案，它创建bfc且无副作用；clear: both 加在父元素上无效，因 clear 只作用于自身而非子元素。
直接用 display: flow-root，现代项目里一行 CSS 就能彻底解决，不需要伪元素、不裁剪内容、不干扰子元素定位。
为什么 clear: both 加在父元素上完全无效
clear 只控制「自身」避开浮动，不是让父容器去“感知”子项。给 .parent { clear: both; } 写上去，它只会在前面有浮动兄弟时换行，对内部浮动子元素的高度计算毫无影响——父容器还是看不见它们，高度照样是 0。
真正起效的 clear: both 必须出现在浮动子元素之后、且仍在同一父容器内的块级元素上。伪元素 ::after 是在模拟这个位置，但前提是它得渲染出来：
-
content: ""缺失 → 伪元素不生成 → 清除失效 -
display没设成table或block→ 伪元素是行内级 →clear: both对它无效 - 父容器本身设了
overflow: hidden或auto→ 可能干扰伪元素的清除行为
display: flow-root 是目前最干净的解法
它是 W3C 明确定义的 BFC 触发方式，专为解决这类问题而生，语义清晰、零副作用：
- 不裁剪任何溢出内容：
position: absolute弹层、box-shadow、下拉菜单、transform动画偏移部分全部保留 - 不改变子元素排布逻辑：float 子项照常浮动，其他子项仍按 normal flow 渲染
- 兼容性已足够好：Chrome 64+ / Firefox 58+ / Safari 15.4+ / iOS 15.4+，2026 年绝大多数生产环境可直接使用
- 写法极简：
.container { display: flow-root; }
注意：display: flow-root 仅对含 float 子元素的容器有效；若父容器已是 display: flex 或 display: grid，则无需处理——它们本身已是独立格式化上下文。
什么时候还得用 .clearfix 伪元素
仅限两类真实场景：
- 需要兼容 IE11 或更老浏览器（IE 完全不识别
flow-root） - 对接无法修改的第三方 HTML（比如 CMS 输出的固定结构，你只能加 class）
标准写法必须三要素齐全，缺一不可：
-
content: ""：空字符串，不能省略或写成none -
display: table：比block更稳妥，能避免旧版 IE 的 margin 双倍问题，且天然触发 BFC 边界 -
clear: both：核心动作，强制该伪元素避开所有浮动，从而撑开父高
嵌套浮动结构中，每一级「直接包裹浮动子项」的容器都得单独加 .clearfix，外层加了不代表内层自动生效。
最容易被忽略的是：很多人调试时反复改子元素的 float 或 margin，却忘了真正控制高度的关键节点是父容器本身；还有人把 clear 错加在浮动元素自己身上——那根本不起作用，clear 必须作用于“想下移”的那个元素，通常是浮动兄弟之后的新元素或伪元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
