.clearfix::after 无高度是因伪元素未渲染或未参与布局：必须显式写 content: ""，设 display: table/block，避免父容器 overflow/height/position 干扰；现代推荐用 display: flow-root 替代。
.clearfix::after 加了却没高度，通常不是“清除失败”，而是伪元素根本没参与布局计算——它被浏览器跳过了。
为什么 content: "" 缺失会导致完全失效
伪元素没有 content 属性（哪怕值为空字符串），浏览器就不会生成该节点。此时 display: table 和 clear: both 都无处依附。常见错误写法包括：content: none、content: " "（带空格）、或直接省略这一行。
-
content: ""必须显式写出，不能用注释代替 - 若用预处理器（如 Sass），确保编译后仍保留该声明，有些配置会自动删空 content
- 在 DevTools 的 Elements 面板里检查伪元素是否真的出现在父容器末尾：没出现 = 没渲染 = 白加
display 值设为 inline 或未设置的后果
::after 默认是 inline 级别，而 clear: both 对行内元素无效。即使写了 clear: both，浏览器也会忽略它。
- 必须设
display: table或display: block；推荐display: table，它天然触发 BFC，且在 IE8+ 更稳 - 不要依赖
display: inline-block—— 它仍可能因基线对齐导致高度计算异常 - 若父容器是
display: inline（比如span），需先设display: inline-block或block，否则伪元素不渲染
父容器自身属性干扰清除行为
有些样式会让伪元素“存在但无效”：它渲染了，却无法撑开高度。
-
overflow: hidden、overflow: auto与::after同时存在时，可能裁剪伪元素或阻止其影响高度计算（尤其在缩放或 transform 场景下） -
height、max-height或min-height显式设值会锁死父容器高度，清除浮动再成功也撑不开 - 父容器设了
position: absolute或fixed，它已脱离文档流，clear对它内部子项不再起清除作用
现代项目里最容易被忽略的一点
你可能根本不需要清除浮动——如果父容器已经是 display: flex 或 display: grid，浮动子元素会自动退化为普通块级元素，.clearfix 不仅无效，还可能意外引入空白或 margin 折叠异常。更关键的是：display: flow-root 是专为此设计的原生方案，一行代码、零副作用、无需伪元素，且 Chrome 64+/Firefox 58+/Safari 15.4+ 全支持。但它只在父容器上生效，不会穿透到子级——嵌套浮动结构仍需逐层处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
