ie6/7下clearfix伪元素不生效需用*zoom:1触发haslayout，配合.clearfix::after{content:"";display:table;clear:both}实现双保险兼容。
IE6/7下clearfix伪元素不生效怎么办
直接原因：IE6/7不支持::after伪元素，所以标准的.clearfix::after规则完全不会被解析。只靠伪元素写法，在这些浏览器里等于没写。
必须补上触发hasLayout的私有属性——这是IE6/7识别“容器应包裹浮动子项”的唯一可靠方式。
-
*zoom: 1是最轻量、最稳妥的选择，它不改变布局，仅强制IE6/7重建渲染树 - 避免用
display: inline-block或height: 1%等副作用更强的方案，容易引发盒模型错乱 - 注意
*是IE专有前缀，现代浏览器会忽略，无需担心兼容性污染
overflow: hidden 在IE6中为何有时仍失效
单纯写overflow: hidden在IE6里可能还是塌陷，因为IE6对overflow的BFC触发不完整，必须配合hasLayout才能真正生效。
典型错误写法：.container { overflow: hidden; } → IE6下依旧高度为0
正确写法（双保险）：
.container {
overflow: hidden;
*zoom: 1;
}
-
overflow负责创建BFC，*zoom: 1负责补全IE6的渲染逻辑 - 不要用
overflow: auto代替——IE6下它可能意外触发滚动条或计算错误 - 如果容器内有绝对定位元素且需溢出显示，
overflow: hidden本身就不适用，得换clearfix方案
为什么不能只依赖display: flow-root
display: flow-root确实是语义最清晰、副作用最小的现代方案，但它在IE和Edge 16以下完全不支持。
如果你的项目仍需支持IE，直接写display: flow-root等于没写，且没有任何降级行为——浏览器会静默忽略该声明，继续塌陷。
- 它不能和
*zoom: 1或overflow混用：CSS不支持同一属性多值回退 - 想用它，必须搭配
@supports做特性检测，但IE连@supports都不认识，无法安全降级 - 结论：在明确放弃IE支持前，
flow-root只能作为辅助方案，不能替代clearfix
实际项目中最稳的兼容写法
不是“选一个”，而是分层兜底：现代浏览器走标准伪元素，老IE走私有触发。下面这段是经过大量线上项目验证的最小可用组合：
.clearfix {
*zoom: 1;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
-
*zoom: 1放在前面，确保IE6/7先执行；后面的标准规则会被它忽略，不冲突 - 用
display: table而非block，更稳妥兼容IE8– - 不加
visibility: hidden或height: 0等额外隐藏手段——IE6对这些属性解析不稳定，反而可能漏清除
真正容易被忽略的是：即使写了*zoom: 1，如果父容器本身是position: relative且没设宽高，IE6仍可能计算异常。这种边界情况，得靠真实环境测试，不能只信理论。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
