如何用CSS hack修复老版本浏览器的浮动兼容性？

IE6/7中父容器高度塌陷应直接在浮动元素的父容器上设置zoom: 1，以触发hasLayout使其包裹浮动子元素；该写法不改变视觉效果、无副作用，但不可用于浮动子元素自身，且现代项目已基本无需使用。

IE6/7中父容器高度塌陷怎么办

直接用 zoom: 1，写在浮动元素的父容器上。它不改变视觉效果，只触发 IE6/7 的 hasLayout，让父容器能包裹住浮动子元素。别写在浮动子元素自己身上——没用。

为什么不用 overflow: hidden 或 display: inline-block

这两个看似能“撑开”父容器，但副作用明显：overflow: hidden 会意外裁剪 position: absolute 子元素；display: inline-block 会让父容器变成行内级，引发基线对齐、空格间隙等新问题。而 zoom: 1 是纯渲染层补丁，不影响盒模型、定位上下文或溢出行为。

zoom: 1 和 clear: both 能一起用吗

不能混在同一元素上。clear: both 解决的是兄弟元素之间的浮动干扰，不是父容器塌陷问题。如果父容器已经用了 height、overflow 或 position 等能触发 hasLayout 的属性，zoom: 1 就是冗余的，删掉更干净。

现代项目还要写 zoom: 1 吗

绝大多数情况不用。IE6/7 全球市占率已低于 0.01%，主流构建工具和 CDN 默认移除兼容逻辑。但如果维护的是 2010 年前上线的老系统，且必须支持 IE6/7，那 zoom: 1 仍是当时最轻量、最稳妥的选择——它不依赖伪元素、不引入额外 DOM、也不影响其他浏览器。

立即学习“前端免费学习笔记（深入）”；