zoom:1通过触发IE6/7的hasLayout机制，使父容器“感知”浮动子元素并参与高度计算；但需配合::after伪元素才能真正清除浮动、拉低底边至所有浮动最下沿。
zoom: 1 是怎么让 IE6/7 父容器“看见”浮动子元素的？
它不靠清除，而是靠触发 IE 的 hasLayout 机制。IE6/7 中，只有具备 hasLayout 特性的元素，才会真正参与高度计算、边距折叠和浮动包含——否则父容器就当浮动子元素不存在，直接塌陷。
常见能触发 hasLayout 的属性包括：zoom: 1、width（哪怕设 width: auto）、height、position: absolute 等。其中 zoom: 1 最轻量：不改变盒模型尺寸，也不影响布局流，纯属“告诉 IE：请认真算这个盒子的高度”。
为什么不能只用 zoom: 1，还得配 ::after？
zoom: 1 单独用在父容器上，只能让它“意识到”浮动存在，但无法解决浮动元素末尾的垂直位置悬空问题——即：父容器底边仍卡在第一个浮动元素底部，而不是所有浮动元素的最下沿。
所以必须组合使用：
立即学习“前端免费学习笔记（深入）”；
-
.clearfix { *zoom: 1; }：仅 IE6/7 解析的 hack，给父容器加hasLayout -
.clearfix::after { content: ""; display: table; clear: both; }：现代浏览器中插入一个清浮动的伪元素，把底边拉到所有浮动下方
二者缺一不可：前者保老浏览器兼容，后者保布局逻辑正确。
IE8 及以上还用 zoom: 1 吗？
不用。IE8 已原生支持 ::after 伪元素，且引入了更稳定的 BFC 触发方式（如 overflow: hidden）。zoom: 1 在 IE8+ 中虽不报错，但属于冗余行为，还会干扰某些 CSS 动画或 transform 的渲染。
如果你项目已明确放弃 IE6–7 支持，可直接删掉所有 *zoom: 1 和 zoom: 1 相关声明，只保留标准 ::after 写法即可。
真正容易被忽略的是：zoom 不是 CSS 标准属性
它是 IE 私有属性，W3C 从未标准化，现代浏览器（Chrome/Firefox/Safari/Edge）完全不识别 zoom。即使你写 zoom: 1，它在这些浏览器里就是无效声明，CSS 验证器会报 warning。
这意味着：任何依赖 zoom 实现关键布局的代码，在非 IE 环境下都处于“侥幸运行”状态——它起效只是因为后面跟了有效的 ::after，而不是 zoom 本身做了什么。
