ie8不支持::after，必须用:after；其可靠写法为.clearfix{ *zoom:1; }.clearfix:after{ content:""; display:block; clear:both; height:0; visibility:hidden; }。
IE8不支持::after，必须用:after
IE8只识别单冒号伪元素语法，写::after整个规则会被忽略——不是失效，是压根不解析。你检查控制台看不到报错，但.clearfix::after在IE8里等于没写。
实操建议：
- 统一用
:before和:after（单冒号），别依赖PostCSS自动降级，它不处理这个 - 避免Sass/Less默认输出双冒号，配
outputStyle: 'compressed'并手动全局替换::为: - 别在同一个选择器里混用
:after和::after，IE8遇到第一个非法语法就跳过整条规则
.clearfix:after在IE8里不生效的常见原因
即使写了:after，也可能没效果。关键不是语法错，而是IE8对伪元素渲染有额外条件：
-
content: ""必须存在且非空字符串，content: none或省略都不行 -
display: table在IE8中部分版本不稳定，优先改用display: block+height: 0+visibility: hidden - 父容器若设了
overflow: hidden但没触发hasLayout，伪元素仍可能不渲染，需补*zoom: 1 - 如果父元素本身是
position: relative且z-index较低，伪元素层级可能被盖住（IE8 stacking context异常）
兼容IE8的最小可靠clearfix写法
不用“全版本兼容”大杂烩，IE8+只需两段：
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
说明：
-
*zoom: 1是IE6–IE7私有hack，IE8也认，但它在IE8里作用只是触发hasLayout，确保伪元素能渲染 - 不用
:before——IE8单伪元素足够，加它反而增加解析负担 - 不写
font-size: 0或line-height: 0，IE8下可能引发行高塌陷，导致父容器高度计算异常 - 如果项目已明确放弃IE6–IE7，
*zoom: 1可删，但保留它对IE8无害
为什么display: table在IE8里要慎用
display: table在IE8标准模式下虽被支持，但实际表现常出问题：
- 某些IE8 SP2系统里，
display: table伪元素会意外撑开父容器高度，尤其当父容器设了box-sizing: border-box - 与
font-size继承链冲突，导致伪元素生成的“表格”单元格高度不可控 - 如果父容器用了
vertical-align: top，display: table伪元素可能错位，clear: both失效 - 真要追求语义准确，不如直接上
display: block+height: 0，它在IE8里行为更一致
真正难的不是写出能跑的代码，而是判断你的项目到底要不要为IE8留这条后门——一旦开了，后续所有新CSS都要回头验证是否触发hasLayout、是否被单冒号限制、是否在SP2里抽风。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
