zoom: 1本身不清除浮动，仅触发IE6/7的hasLayout使父容器能响应::after清除逻辑；现代项目应弃用，改用display: flow-root、flex或grid布局。
zoom: 1 本身不“清除”浮动，它只是让 IE6/7 的父容器获得 hasLayout 能力，从而能响应后续的清除逻辑（比如 ::after）；现代项目中应直接弃用。
为什么 zoom: 1 必须和 ::after 配合才有效
IE6/7 不支持 ::after 伪元素，但支持单冒号 :after；即便降级写法生效，若父容器没有 hasLayout，插入的清除块仍会被忽略或错位。所以必须双保险：
-
*zoom: 1写在父容器上（*是 IE6/7 专属 hack，其他浏览器跳过） -
.clearfix:after提供视觉上可 clear 的结构（display: block; clear: both;） - 漏掉任一环，IE6/7 下父容器依然塌陷、背景色消失、后续元素上移
*zoom: 1 不能乱加：位置、条件、冗余判断要明确
常见错误是把它加在浮动子元素自身，或加在已有触发 hasLayout 属性的父容器上——完全无效或白加：
- 只对浮动子元素的**直接父容器**生效；加在孙子级或 body 上没用
- 若父容器已设
overflow: hidden、height: 1px、position: absolute等，*zoom: 1就是冗余，删掉更干净 - IE7 下
*zoom: 1有效，但*height: 1%这类写法在 IE7 不匹配，不可混用
现代浏览器该用什么替代 zoom: 1 + clearfix
Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 全支持标准方案，无需 hack：
立即学习“前端免费学习笔记（深入）”；
-
display: flow-root：最干净，明确创建 BFC，天然包裹浮动子项，且不影响子元素定位 -
display: flex或display: grid：浮动在 flex/grid 容器内被忽略，清除逻辑自动失效 -
clear: both只解决兄弟元素间干扰，不是父容器塌陷的解药——这点容易误判
overflow: hidden 看似简单，但副作用真实存在
它虽也能触发 BFC，但在 IE11 及部分旧版 Safari 中，可能意外裁掉 position: absolute 的下拉菜单、阴影、tooltip 或动画溢出部分：
- IE11 下
overflow: hidden对transform动画的裁剪行为不一致 - 和
will-change配合时，某些版本会触发重绘异常 - 如果父容器需容纳弹层类组件，
overflow: hidden比*zoom: 1更危险
真正难处理的不是怎么写，而是判断「这个项目是否还值得兼容 IE6/7」——2026 年还在跑 IE6/7 的环境，往往连 HTTPS 都不支持，CSS hack 只是表象，底层架构才是瓶颈。
