zoom:1 是 ie6/7 的 haslayout 触发器，仅让父容器具备被清除资格，不直接清除浮动；真正清除依赖 ::after 伪元素等标准方案，现代项目无需使用。
zoom:1 是 IE6/7 的 hasLayout 触发器，不是清除浮动本身
它不解决浮动脱离文档流的问题，只让父容器在 IE6/7 渲染引擎里“获得布局能力”，从而能响应后续的清除逻辑（比如 ::after 伪元素）。现代浏览器完全忽略 zoom: 1，它只对 IE6/7 生效。
常见错误现象包括：.clearfix::after 写了但父容器仍塌陷、背景色消失、后续元素上移——大概率是漏了 *zoom: 1 或写错了位置。
- 必须作用于**浮动子元素的父容器**，写在子元素上无效
-
*zoom: 1是 CSS hack 写法，仅 IE6/7 解析，现代浏览器跳过 - 如果父容器已有
overflow: hidden、height、position: absolute等能触发 hasLayout 的属性，*zoom: 1就是冗余的
为什么不能只靠 zoom:1 就完事？
zoom: 1 自己不执行任何清除动作。它只是让 IE6/7 的父容器“具备被清除的资格”。真正起清除作用的，仍是 BFC 触发或 clear: both 行为。
典型组合写法（Nicolas Gallagher 提出，兼容 IE6–IE8）：
.clearfix { *zoom: 1; }
.clearfix::before, .clearfix::after { content: ""; display: table; }
.clearfix::after { clear: both; }
其中：*zoom: 1 铺路，::after 通车。缺一不可。
- 单独加
*zoom: 1→ IE7 下依然塌陷 - 只写
::after不加*zoom: 1→ IE6/7 中伪元素可能被忽略，清除失效 - 把
clear: both写在父容器自身上 → 语义错误，clear只对兄弟元素生效，不是父容器的修复开关
现代项目里还要写 *zoom:1 吗？
绝大多数情况不用。IE6/7 全球市占率已低于 0.01%，主流构建工具（如 Webpack、Vite）、CDN 和 Lighthouse 都默认剔除兼容逻辑。如果你维护的是 2010 年前上线的老系统且明确要求支持 IE6，那它是当时最轻量的选择；否则加了反而增加 CSS 体积、干扰可读性，还可能被 CI 工具标记为过时代码。
替代方案更推荐：
-
display: flow-root—— 专为解决此问题设计，无副作用，Chrome/Firefox/Safari 全支持 -
overflow: hidden+ 注释说明裁剪风险 —— 兼容 IE8+，比*zoom: 1更可控 - 直接迁移到
display: flex或display: grid—— 浮动本身就不该再用
容易被忽略的关键点
*zoom: 1 是垫脚石，不是终点。它只在 IE6/7 的 hasLayout 机制里起作用，且必须和真正的清除手段配合。现在这条路早就铺好了：标准 BFC 触发方式稳定、无副作用、无需 hack。还在代码里看到 *zoom: 1，大概率是旧代码残留，或者构建工具自动注入的过时兼容层——删掉它，只要确认不支持 IE8 及更早版本，就不会出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
