双伪元素比单::after更兼容ie6/7，因为ie6/7仅识别单冒号语法:after且不支持伪元素触发haslayout，需:after执行清除、:before“唤醒”渲染并配合*zoom:1强制haslayout。
为什么双伪元素（:before + :after）比单::after更兼容 IE6/7
因为 IE6/7 不识别 ::after 这种双冒号语法，只认单冒号 :after；而仅靠 :after 在这些老浏览器中无法触发 hasLayout，导致清除失效。双伪元素写法本质是「兜底」：用 :before 触发早期渲染机制，再用 :after 执行清除逻辑，配合 *zoom: 1 强制 hasLayout。
-
:before不承担清除任务，只起“唤醒”作用——设display: table即可，不需clear -
:after必须带clear: both，且content: ""不可省略，否则伪元素不生成 -
*zoom: 1是 IE6/7 专属 hack，星号前缀确保其他浏览器忽略它 - 现代浏览器（IE8+）下
:before实际无作用，但保留不影响功能，只增兼容性
.clearfix:before, .clearfix:after 的标准写法及参数取舍
最简可用组合是：
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
关键点在于：display: table 比 display: block 更稳——它天然创建匿名 BFC 容器，不会继承父级 line-height 或受空白符影响；而 display: block 在某些嵌套浮动场景下会因 margin 折叠或 line-height 干扰导致清除失败。
- 不要用
height: 0; overflow: hidden替代display: table，前者会裁剪position: absolute子元素（比如下拉菜单） - 避免写
visibility: hidden或opacity: 0，它们仍占文档流高度，无法真正“撑开”父容器 - 如果项目已放弃 IE6/7 支持，可删掉
:before和*zoom: 1，只留::after即可
哪些情况下双伪元素清除会静默失效
它不是万能的，失效时往往没报错，只是父容器依然塌陷——常见于以下真实场景：
- 父容器本身设了
position: absolute或fixed且未声明width/height，此时:after无法正确参与尺寸计算 - 父容器用了
transform、filter或will-change，创建了新层叠上下文，clear: both被隔离在局部格式化上下文中 - 子元素同时用了
float和负margin-top，与:after的清除行为冲突，优先改用margin-bottom控制间距 - 在 Shadow DOM 或 CSS-in-JS 环境中（如 styled-components），类名被哈希化，
.clearfix选择器可能根本匹配不到
现代项目里要不要继续用双伪元素清除浮动
该方案仍是「安全兜底」，但不是首选。真正要警惕的是：你还在用 float 做整体布局吗？
- 如果父容器是
display: flex或display: grid，子元素的float属性会被忽略，加.clearfix纯属冗余 - 若只需临时清除，直接在下一个兄弟元素上写
clear: both更轻量，不污染父级样式 - 当父容器本身已有
overflow: hidden，就不需要额外加.clearfix——但得确认它不会意外裁剪 tooltip 或下拉框 - 服务端渲染（SSR）初始 HTML 为空时，
:after可能因 CSS 加载延迟短暂失效，建议配min-height: 1px防抖
display: flow-root 或直接迁移到 Flex/Grid，比修补浮动更省力。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
