::after 清除浮动更可靠，因其通过插入伪元素并触发 BFC 来撑开父容器，不污染 HTML 语义；推荐写法为 content: "" + display: table + clear: both。
用 ::after 清除浮动为什么比 clear: both 更可靠
因为浮动元素会脱离文档流，父容器高度塌陷，而 ::after 能在父元素末尾插入一个「看不见但有布局作用」的伪元素，配合 display: table 或 clear: both 触发 BFC，强制撑开父容器。
- 直接写
clear: both在子元素上，容易遗漏或污染语义（比如给<div> 加 class 专门清浮） <li> <code>::after是纯样式层干预，不改动 HTML 结构，维护成本低 - 推荐写法是
content: ""+display: table（比block更稳妥，避免 margin 折叠干扰）
.clearfix::after {
content: "";
display: table;
clear: both;
}
::after 插入内容时，content 值的取舍逻辑
不是所有 content 值都适合生产环境：空字符串 "" 安全；" "（空格）可能引发行高/对齐异常；attr() 依赖 HTML 属性存在，缺失时回退为空——得提前兜底。
-
content: ""最常用，尤其用于清除浮动、添加装饰性图标 -
content: attr(data-label)可读性强，但需确保元素带data-label属性，否则显示空白 -
content: "→"或content: "•"适合视觉提示，注意字体兼容性（建议搭配font-family: system-ui） - 绝对不要写
content: none—— 这是无效值，浏览器会忽略整个声明
伪元素定位失效？检查这三点
::after 默认是 inline 级，无法直接设宽高/定位，必须先改 display。常见失效场景基本都卡在这一步。
- 要绝对定位（
position: absolute），父元素必须有position: relative（否则相对于视口定位） - 设
width/height前，display至少得是block、inline-block或flex - 如果伪元素没显示，先用
background: red和border: 1px solid临时调试，确认是否被遮挡或尺寸为 0
.icon-btn::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
background: #333;
transform: translate(-50%, -50%);
}
和 :after 单冒号写法的区别与兼容性陷阱
CSS2 用单冒号 :after，CSS3 规范改为双冒号 ::after 以区分伪类（如 :hover）和伪元素（如 ::before）。现代浏览器都支持双冒号，但 IE8 只认单冒号。
立即学习“前端免费学习笔记（深入）”；
- 如果项目还需兼容 IE8，必须写成
:after，且不能和::after同时存在（否则低版本会忽略整条规则） - 主流项目可放心用
::after，但要注意构建工具（如旧版 Autoprefixer）可能自动降级，得查配置 - 切勿混用：写
.x::after { ... } .x:after { ... }会导致重复渲染或样式冲突
::after 自身，多看父容器的 position、overflow 和 transform。
