content: "" 缺一不可，因浏览器规范强制要求伪元素必须声明 content 才能生成节点，否则 display 和 clear 等样式全部失效；搭配 display: table 和 clear: both 才能可靠清除浮动。
content 必须写，且必须是 ""（空字符串），不能省略、不能写成 " "、"." 或 none。这是伪元素渲染的前提，不是可选项。
为什么 content: "" 缺一不可
浏览器规范强制要求：没有 content 声明的 ::after 伪元素根本不会生成节点，后续所有样式（包括 display: block 和 clear: both）全部失效。
-
content: none或完全不写content→ 伪元素不创建，DOM 中无对应节点 -
content: " "（空格）→ 渲染出空白字符，可能撑开意外高度（尤其在inline-block父容器中） -
content: "."→ 字符受font-size和字体 fallback 影响，font-size: 0下仍可能残留小方块 -
content: ""→ 语义明确：“存在但无内容”，零渲染副作用，唯一标准解法
clear: both 为什么必须搭配 display: table 或 display: block
clear 属性只对块级框生效。伪元素默认是 inline，即使加了 clear: both 也无效。
-
display: table是更稳妥的选择：兼容 IE8+，隐式创建 BFC，不继承line-height或font-size，避免意外间距 -
display: block可用，但在老版 Safari 或某些 margin collapse 场景下可能多出 1px 高度 -
display: inline-block不行：仍是行内级参与布局，且引入空白间隙和基线对齐问题 -
display: flex或display: grid会破坏clear行为，直接失效
常见静默失效场景和排查点
写了 .clearfix::after 却没清掉浮动？大概率是以下某个环节断了链：
- 父容器没加
.clearfix类，或类名拼写错误（如写成clear-fix） -
content: ""漏了引号，写成content: ;或content:（语法错误，整条规则被忽略） - 父容器自身有
overflow: hidden、auto或transform，干扰了伪元素的清除逻辑 - CSS 优先级被覆盖：比如全局重置了
*::after { content: normal; }，直接废掉所有clearfix - 伪元素被其他样式压制：例如误加
height: 0; overflow: hidden;，把清除节点裁掉了
真正起作用的是三者协同：content: "" 让伪元素“出生”，display: table 让它“站稳”，clear: both 让它“顶上去”。漏掉任意一个，就只剩一个看不见、动不了、不干活的幽灵节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
