content: ""是硬性前提，因CSS规范强制要求伪元素必须有非none的content值才能渲染，否则::after根本不生成，clear: both失效；搭配display: table和clear: both三者缺一不可。
content: "" 不是为了“避免占位”，而是为了**强制伪元素渲染**——没有它，::after 根本不会出现在布局中，clear: both 就是废代码。
为什么 content: "" 是硬性前提
浏览器规范要求：伪元素必须有可生成的内容，否则不创建渲染节点。这不是兼容性问题，是 CSS 引擎的底层规则。
-
::after { display: block; clear: both; }→ 完全无效，DOM 中查不到该伪元素 -
content: none或省略content→ 等价于没写这个伪元素 -
content: " "（空格）→ 会引入一个空白字符，可能撑开行高或触发换行 -
content: "."→ 字符可见，需额外加visibility: hidden或font-size: 0补救 -
content: ""→ 无内容、无副作用、语义明确：仅需占位
display: table 比 display: block 更稳的原因
两者都能让伪元素成为块级框并响应 clear，但 display: table 在旧 Safari（iOS 5–7）里更可靠：它隐式创建 BFC，能正确撑开父容器高度；而 display: block 在某些旧版 Chrome 下可能多出 1px 高度。
- 别用
display: inline或display: inline-block—— 它们不参与清除逻辑 -
display: table-cell同样无效，clear 属性对表格单元格无作用 - 现代项目用
display: table完全安全，不污染子元素样式，也不引入空白间隙
为什么不能只靠 clear: both 而不配伪元素
clear 属性只对「自身所在流中、位于浮动元素之后的兄弟块级元素」生效。父容器不是浮动元素的“兄弟”，它是“祖先”——给它直接加 clear: both，浏览器直接忽略。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
.parent { clear: both; }→ 零效果，高度照样塌陷 - 正确路径：必须在父容器内部末尾插入一个新块，让它作为浮动元素的“后续兄弟”来承担清除职责
- 这就是
::after的本质：可控、位置确定、无需 DOM 干预的清除节点
真正容易被忽略的点是：伪元素清除不是“写了 ::after 就自动生效”，而是三要素缺一不可——content: ""、display: table（或 block）、clear: both。漏掉任何一个，页面就静默塌陷，连控制台都报不出错。
