::before 和 ::after 各只能有一个，content 值唯一，故图标与清除浮动必须分属不同伪元素；.icon-clearfix::after 必须 content: ""、display: table、clear: both 才可靠生效。
::before 和 ::after 本身不冲突，但「清除浮动」和「添加前缀图标」必须分属不同伪元素，且 content 值不能共用——否则图标会消失或清除失效。
为什么 ::before 不能同时干两件事
一个元素只能有一个 ::before 和一个 ::after。如果你把清除逻辑写在 ::before 上（比如 content: "" + clear: both），那它就再也没法显示图标了——因为 content 只能有一个值，content: "?" 和 content: "" 无法共存。
-
::before专用于图标：必须有非空content（如content: "★"或content: attr(data-icon)） -
::after专用于清除：必须是content: ""，且带clear: both和display: table - 两者顺序无关，但作用域必须落在同一父容器上——即父容器同时应用
.icon-clearfix类
.clearfix::after 的最小可靠写法
很多项目抄错成 display: block 或漏掉 content: ""，结果边框还在塌、图标也乱位。真正起效的只有这一组：
.icon-clearfix::after {
content: "";
display: table;
clear: both;
}
-
content: ""不可省略，也不可用content: " "（空格会占位，可能撑高行距、顶开图标） -
display: table比block更稳：避免外边距合并，尤其当父容器有line-height或嵌套在flex里时 - 不需要
height: 0或visibility: hidden——content: ""+display: table已足够隐形且生效
前缀图标位置偏移的常见原因
即使伪元素都写了，图标仍可能贴着内容顶部、被截断或换行，问题往往不在伪元素本身：
- 父容器没设
position: relative，导致::before的absolute定位找不到参照系 -
::before设置了top: 0但父容器有padding-top，图标就压进内边距里了 - 子元素用了
float+margin-left，而::before是行内级，垂直对齐默认按baseline，看起来像“飘起来” - 字体图标（如 IcoMoon）未声明
font-display: block或vertical-align: middle，导致基线错位
现代布局下更简单的替代方案
如果只是为了「左侧图标 + 右侧文字」这种常见模式，硬套浮动+伪元素清除，反而容易让图标和文字错位。直接用 display: flex 更干净：
.icon-row {
display: flex;
align-items: center;
gap: 8px;
}
.icon-row::before {
content: "?";
flex-shrink: 0;
}
此时根本不需要 ::after 清除浮动——因为没用浮动。复杂点从来不是怎么写伪元素，而是先问一句：这个浮动，是不是从一开始就不该存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
