content: "" 必须写且不能用空格，因为伪元素::after需content存在且非none才渲染；空格会插入空白字符撑高行盒，而""生成无副作用的空占位节点。
为什么 content: "" 必须写，且不能用空格？
伪元素 ::after 不会渲染，除非 content 属性存在且值不为 none。漏掉这行，整个清除逻辑就失效——不是“没效果”，而是压根没生成那个用于清除的节点。
常见错误包括：
• 写成 content: ;（无引号、无值）→ 浏览器忽略
• 写成 content: " "（带空格）→ 插入不可见空白字符，可能撑高行盒、影响 line-height 继承，导致父容器上下边距异常或内容间距变大content: "" 是唯一无副作用、可预测的取值，它生成一个真正“空”的块级占位节点
display: table 比 display: block 更稳的关键原因
很多教程用 display: block + clear: both，但在真实项目中容易出问题：
• display: block 会继承父容器的 line-height，若父容器设了较大行高，伪元素会意外撑高，破坏内容垂直间距
• 在嵌套较深的 flex 容器、或有 transform 的上下文中，block 可能无法正确触发清除行为display: table 天然创建匿名 BFC，不继承 line-height，也不参与外边距合并（margin collapse），能更可靠地保持原有内容间距和边框位置
边框/间距异常时，优先检查这三处
即使伪元素写对了，父容器边框断开、内容被“吸上去”或底部留白过大，往往不是清除本身的问题：
• 父容器设置了 transform（如 scale(1) 或 translateZ(0)）但没显式声明 width/height → 伪元素尺寸计算失准，边框渲染错位
• 子元素用了 float + 负 margin → 浮动脱离文档流后，clear: both 的定位基准偏移，伪元素实际落点不准
• .clearfix 类加在了中间层（比如 Vue 组件根节点），而非「直接包裹浮动子项」的那层 → 清除作用域错位，边框只包住部分子元素，内容间距视觉上被压缩或拉伸
现代布局下，.clearfix 往往是多余操作
如果父容器已经是 display: flex 或 display: grid，浮动在这些上下文中本就不生效，.clearfix 不仅无效，还可能干扰 align-items 或 justify-content 的表现。
真正需要保留伪元素清除的场景只剩：
• 图文环绕（如文字绕图片排版）
• 兼容老系统（IE8–IE11）且无法升级布局方式
• 混合使用浮动与传统块流的遗留模块
复杂点从来不在怎么写 ::after，而在于判断：这个浮动是不是本就不该存在——多数时候删掉 float，改用 flex 或 grid，比反复调试清除逻辑更能守住内容间距和边框一致性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
