:before伪元素必须设置content: ""才能渲染，否则不生成节点；需配合display: block和clear: both才能实现清除浮动，三者缺一不可。
content 属性必须写 ""（空字符串），不能省略、不能写空格、不能写 " " 或 "."，否则伪元素不渲染，清除失效。
为什么非得是 ""？不是空格也不是点
浏览器只认「有内容」才生成伪元素；content: " " 是一个空格字符，会触发行框计算，可能撑出意外高度；content: "." 虽能渲染，但字符有字体度量，受 font-size 和 line-height 影响，在父容器 font-size: 0 或缩放场景下容易错位或残留像素；而 content: "" 是语义上“存在但无任何渲染内容”的标准写法，零副作用。
-
content: ""→ 安全、稳定、无高度、无字体依赖 -
content: " "→ 可能产生 4px~8px 不可控的上下间距（尤其在 inline-block 父容器中） -
content: "."→ 在font-size: 0下仍可能渲染为小方块（某些字体 fallback 行为） -
content: none→ 不合法，CSS 会忽略该声明，伪元素直接不创建
content: "" 必须和哪些样式配对才有效
单独写 content: "" 没用——它只是让伪元素“出生”，但没给它“行为”。真正起清除作用的是三者协同：
-
display: block或display: table：确保元素能参与块级格式化上下文（BFC），否则clear不生效 -
clear: both：这是清除动作本身，告诉浏览器“我下面不能有任何浮动” -
content: ""：触发伪元素实例化（没有它，其他两个属性根本没作用对象）
漏掉任意一个，清除都会静默失败。常见错误是只写 content: "" + clear: both 却忘了 display，结果伪元素仍是 inline，默认 clear 无效。
立即学习“前端免费学习笔记（深入）”；
在 PostCSS / Sass 中抽成 @mixin 时怎么避免 content 被覆盖
很多团队把 clearfix 抽成 @mixin clearfix，但容易在嵌套规则里被其他 content 声明覆盖（比如同时用了 ::before 插图标）。关键点是：
- 明确限定作用域：
.clearfix::after，不要用泛义选择器如&::after在复杂嵌套中失控 - 避免重复声明
content：Sass 中若父类已有content: attr(data-label)，子类@include clearfix会冲突，必须加!important或重构层级 - PostCSS autoprefixer 不处理
content，但部分 CSS 压缩工具（如 cssnano）可能误删content: ""，需检查压缩后输出是否保留
Shadow DOM 或 Web Component 里 content: "" 失效的典型原因
在 :host 内写 ::after { content: ""; ... } 时，如果父容器设了 overflow: hidden 或 contain: layout，伪元素可能被裁剪或隔离，导致视觉上“清了但没撑开”。更隐蔽的问题是：
- Shadow DOM 中
content: ""生效，但若宿主元素使用了display: contents，整个:host::after会被移出渲染树 - Light DOM 的全局样式不会穿透进 Shadow DOM，所以外部定义的
.clearfix::after对 shadow 内部无效 - 某些框架（如 Lit）的模板系统会自动 strip 空
content，需显式写content: "\0020"（Unicode 空格）绕过，但这又回到前面说的空格风险
真正难调试的不是写法，而是伪元素“存在但不可见”——它可能渲染了，却被父容器的 overflow、transform 或 clip-path 悄悄截断了。查问题时优先 inspect 元素面板确认 ::after 是否出现在 computed 样式里，再看 layout tab 看它有没有实际尺寸。
