display: flow-root 是现代最优解，一行即可解决浮动塌陷；仅需 .container { display: flow-root; }，父容器立即包含浮动子项，且无副作用。
直接用 display: flow-root，一行解决；只有需兼容 IE11 及更老浏览器时，才考虑 clearfix。
为什么 clear: both 加在父元素上完全无效
它只对「自身」生效，不是用来清理子元素的。给父容器写 .parent { clear: both; }，只是让它避开前面可能存在的浮动兄弟元素，对其内部的浮动子项毫无影响——父容器依然“看不见”它们，高度还是 0。
真正起效的 clear 必须出现在浮动元素之后、且仍在同一父容器内的块级兄弟位置上。伪元素 ::after 能模拟这个位置，但前提是它必须渲染出来：
- 漏掉
content: ""：伪元素不生成，clear形同虚设 -
display没设对（比如留空或设成inline）：clear: both对行内级元素无效 - 父容器本身有
height或min-height：会覆盖 clearfix 带来的高度计算
display: flow-root 是现代最优解
它是 W3C 明确定义的 BFC 触发方式，专为解决这类问题而生，语义清晰、零副作用：
- 只需一行：
.container { display: flow-root; } - 父容器立刻重新包含所有浮动子项，背景、边框、后续 margin 全部正常
- 不干扰
position: absolute弹层、box-shadow、下拉菜单等溢出内容 - 不改变子元素排布逻辑（不像
flex或grid那样重置 float 行为） - Chrome 64+ / Firefox 58+ / Safari 15.4+ 均已原生支持，2026 年可放心使用
.clearfix::after 必须写对的三个关键点
仅当需要支持 IE11 或对接无法修改的旧 HTML 时才用。标准写法缺一不可：
-
content: ""：必须显式为空字符串，不能省略、不能写none -
display: table：比block更稳妥，能可靠触发 BFC，还避免 IE6/7 的 margin 双倍问题 -
clear: both：强制该伪元素下移，把父容器底部“拉下来”
嵌套浮动结构中，每一级「直接包裹浮动子项」的容器都得单独加 .clearfix；外层加了不代表内层自动生效。
别在 Flex 或 Grid 容器里徒劳地加 clearfix
如果父容器已是 display: flex 或 display: grid，子元素的 float 属性会直接失效——它退化为普通块级元素，不再脱离文档流，高度塌陷问题根本不会出现。
此时加 .clearfix 不仅无效，还会干扰调试；强行混用 float 和 justify-content 等属性，反而容易引发意外交互。
真正麻烦的从来不是写不对，而是加错了层级、或者在本不该用的地方硬塞 ::after——那个伪元素根本不会参与布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
