content: "" 是伪元素生效的硬性前提，缺它则 ::after 根本不渲染，清除失效；必须显式声明且推荐为空字符串，以满足规范要求并避免副作用。
content: "" 不是可选的装饰，它是伪元素生效的硬性前提——没它，::after 根本不渲染，清除行为直接失效。
为什么 content: "" 必须存在且为空字符串
浏览器对伪元素有明确规范：只有声明了 content 属性，才会创建对应的 DOM 节点。值为 none、省略不写、或设为 normal（比如被全局重置覆盖），都会导致 ::after 消失。
-
content: " "（空格）或content: "."虽能触发渲染，但会引入不可见字符，可能撑开行高、触发换行、干扰垂直对齐 -
content: ""是唯一既满足规范要求、又零副作用的选择——它占位但不输出任何内容 - 常见坑：
*::after { content: normal; }这类全局重置会静默废掉所有.clearfix::after
display: table 比 display: block 更稳的实操原因
老 Safari（iOS 5–7）对 display: block + clear: both 的组合处理异常，父容器高度常计算错误；而 display: table 会隐式创建匿名表格单元，更严格参与 BFC 计算，兼容性兜底更强。
- 现代项目可放心用
display: table，它不改变文档流，也不影响子元素样式 - 别用
display: inline-block：会引入空白符间隙，且在某些上下文中触发基线对齐问题 - 若需支持 IE6/7，加
*zoom: 1触发 hasLayout，但当前基本可忽略
伪元素清除失效的三个隐蔽原因
很多人复制粘贴一段 .clearfix 就以为万事大吉，结果调试时卡住，往往是因为：
立即学习“前端免费学习笔记（深入）”；
- 父容器本身有
overflow: hidden或transform，已创建新 BFC，与伪元素的清除行为叠加，导致高度计算异常 - 其他样式覆盖了伪元素，比如设置了
height: auto或visibility: visible，让清除节点意外占空间 - 用了 Tailwind 等工具链，但其
clearfix工具类漏掉了content: ""（精简版常见）
真正关键的不是写几行 CSS，而是理解 content: "" 是伪元素存在的开关——它不占空间，但缺它不行；所有“清浮动失败”的问题，八成先查这一行有没有、有没有被覆盖、有没有被重置。
