标准写法是.clearfix::after { content: ""; display: table; clear: both; }，其中content: ""触发伪元素实例化，display: table创建BFC并撑高，clear: both清除浮动。
不写 content: ""，伪元素根本不会生成节点
浏览器规范强制要求：::after 和 ::before 是“生成内容”的伪元素，没有 content 声明，就等于没出生——DOM 里压根没这个节点，后续所有样式（display: table、clear: both）全部失效。
常见错误写法：.clearfix::after { display: block; clear: both; }，看着完整，但没 content，父容器照样塌陷，背景/边框消失，控制台还不报错，调试时极难定位。
-
content: none或完全省略 → 伪元素不创建，清除静默失败 -
content: " "（空格）→ 渲染出空白字符，可能撑出 4–8px 不可控高度，尤其在inline-block父容器中 -
content: "."→ 字符受字体和font-size影响，font-size: 0下仍可能残留小方块 -
content: ""→ 语义明确：“存在但无任何渲染内容”，零副作用，唯一标准解法
content: "" 必须和 display + clear 协同才有效
content: "" 只是让伪元素“出生”，它本身不负责清除。真正起作用的是三者配合：
-
content: ""：触发伪元素实例化（没有它，其他两个属性根本没作用对象） -
display: table或display: block：确保它是块级或表格级框，否则clear属性无效（clear只对块级/表格级元素生效） -
clear: both：这是清除动作本身，告诉浏览器“我下面不能有任何浮动”
漏掉任意一个，就只剩一个看不见、动不了、不干活的幽灵节点。比如只写 content: "" + clear: both 却忘了 display，伪元素仍是默认的 inline，clear 直接被忽略。
立即学习“前端免费学习笔记（深入）”；
为什么推荐 display: table 而不是 display: block
关键不在“是否块级”，而在“是否可靠撑开父容器高度”：
-
display: table隐式创建匿名表格盒子，强制参与 BFC 计算，在旧版 Safari（iOS 5–7）、部分 Chrome 中对浮动包裹更鲁棒 -
display: block在某些 margin collapse 场景下可能多出 1px 高度 -
display: inline-block不行：仍是行内级，会引入空白间隙和基线对齐问题 -
display: flex或display: grid会破坏clear行为，直接失效
现代项目若无需兼容 IE8，display: table 是比 display: block 更稳的选择；但若已用 display: flex 或 display: grid，根本不需要 clearfix——浮动在这些上下文中自动失效。
容易被忽略的失效场景
写了 .clearfix::after 却没清掉浮动？大概率卡在以下某个环节：
- 父容器没加
.clearfix类，或类名拼写错误（如写成clear-fix） -
content: ""漏了引号，写成content: ;或content:（语法错误，整条规则被忽略） - 父容器自身有
overflow: hidden、transform或contain，干扰了伪元素的清除逻辑 - CSS 优先级被覆盖：比如全局重置了
*::after { content: normal; }，直接废掉所有 clearfix - 伪元素被其他样式压制：例如误加
height: 0; overflow: hidden;，把清除节点裁掉了
真正起作用的是三者协同：content: "" 让伪元素“出生”，display: table 让它“站稳”，clear: both 让它“顶上去”。漏掉任意一个，就只剩一个看不见、动不了、不干活的幽灵节点。
