zoom: 1本身不清除浮动，仅在IE6/7中触发hasLayout使父容器感知浮动子元素高度；必须作用于父容器并配合::after或BFC才有效，现代项目已弃用。
zoom: 1 在现代项目中**不推荐用于清除浮动**，它仅在明确需支持 IE6/IE7 的极少数遗留场景下才有效——且必须配合伪元素或 BFC 触发逻辑，单独使用完全无效。
为什么 zoom: 1 本身不清除浮动
zoom: 1 不是清除浮动的指令，而是 IE6/IE7 中触发 hasLayout 的渲染开关。只有父容器具备 hasLayout = true，它才能“感知”浮动子元素的高度，从而避免塌陷。但这个过程不涉及 clear 或布局重排，纯属 IE 内部渲染机制补丁。
- 只加
*zoom: 1（或zoom: 1）到父容器 → IE7 下依然塌陷 - 把
zoom: 1加在浮动子元素上 → 完全无效，hasLayout必须作用于父容器 - 父容器已设
overflow: hidden或position: absolute→zoom: 1是冗余的，IE6/7 下也无需重复触发
*zoom: 1 必须和 ::after 配合才生效
IE6/7 不识别双冒号语法 ::after，只认单冒号 :after；更关键的是，即使写了 :after，若父容器没 hasLayout，伪元素根本不会参与布局计算，clear: both 形同虚设。
- 安全写法必须同时包含两部分：
.clearfix { *zoom: 1; }.clearfix:before, .clearfix:after { content: ""; display: table; }.clearfix:after { clear: both; } -
*zoom: 1是 CSS hack，仅 IE6/7 解析，现代浏览器忽略，避免污染样式表 - 不用
content: "."，空字符串""更稳妥；某些 Android WebView 对点号会触发渲染抖动
哪些情况加了 *zoom: 1 仍失效
失效往往不在伪元素或 hack 本身，而在容器或子元素的状态干扰了布局逻辑：
立即学习“前端免费学习笔记（深入）”；
- 父容器设了
height或max-height→ 高度被硬编码，伪元素无法撑开 - 浮动子元素未设
width→ 块级元素浮动后宽度收缩为内容宽，父容器无稳定高度基准 - 父容器本身是
position: absolute或fixed→ 已脱离文档流，clear对其无意义 - CSS-in-JS 场景（如 styled-components）→ 类名哈希化后
.clearfix选择器匹配失败，建议改用属性选择器如[data-clear]
真正容易被忽略的是：*zoom: 1 只是 IE6/7 的垫脚石，不是解决方案本身。2026 年绝大多数项目已无需兼容该环境，若你还在用它，先确认是否真有 IE6/7 流量——否则只是在维护一个早已铺好路的旧地基。
