IE6/7中浮动问题本质是hasLayout未触发，需用zoom:1等安全方式激活layout，而非仅靠clear:both；标准clearfix在IE6/7失效，必须配合*zoom:1双保险。
IE6/7 中浮动元素塌陷、父容器高度丢失、文字环绕错位等问题，本质是 hasLayout 未触发 —— 不是单纯“清除浮动”就能解决，而是要让父容器获得 layout。
什么是 hasLayout？为什么它影响浮动表现
hasLayout 是 IE6/7（及 IE8 兼容模式）独有的内部渲染属性。元素只有在 hasLayout = true 时，才会独立参与盒模型计算、正确包裹浮动子元素、避免文字穿透等怪异行为。常见触发方式包括 zoom: 1、height: 1px、overflow: hidden 等，但效果不等价。
-
zoom: 1是最安全的显式触发方式：不改变布局、无副作用、兼容所有 IE 版本 -
overflow: hidden虽常用，但在 IE6/7 下可能意外裁剪定位元素（如position: absolute子项超出边界） -
height: 1px或min-height: 1px在 IE6 下无效（IE6 不支持min-height），且可能破坏语义高度
为什么 clearfix 伪类在 IE6/7 下经常失效
标准 :after 清除浮动方案（如 .clearfix::after { content: ""; display: table; clear: both; }）在 IE6/7 中完全不生效 —— 因为它们不支持 ::after 伪元素，也不识别 display: table。即使降级为 :after（单冒号），IE6/7 仍忽略。
- 必须配合 hasLayout 触发：给父容器加
zoom: 1，才能让 IE6/7 “意识到”自己该包裹子元素 - 仅靠
clear: both插入块级元素不够 —— 如果父容器没有 layout，插入的清除元素本身也会被忽略或错位 - 不要依赖
* html .clearfix这类 IE6 专属 hack 来单独加height: 1%，它在 IE7 下不匹配，且百分比高度在无高度上下文时不可靠
推荐的 IE6/7 安全清除方案（双保险）
真正可靠的写法是：既触发 hasLayout，又提供视觉上可清除的结构支撑。以下代码可直接复用：
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
说明：
-
*zoom: 1是 IE6/7 专属 hack（*前缀仅 IE6/7 解析），安全触发 layout，不影响其他浏览器 -
:before和:after在 IE6/7 中虽不支持双冒号，但单冒号仍被部分识别；更重要的是，IE6/7 遇到不认识的伪元素会忽略整个规则 —— 所以我们把display: table放在这里，实际起效的是*zoom: 1 - 现代浏览器走标准
::after清除逻辑，IE6/7 走*zoom: 1+ layout 保障，互不干扰
容易被忽略的边界情况
即使加了 *zoom: 1，某些场景仍会出问题：
- 父容器设置了
position: relative但未触发 layout：IE6/7 下 relative 不自动触发 layout，仍需*zoom: 1 - 浮动子元素含
margin-bottom，而父容器有overflow: hidden：IE6/7 可能吞掉底部 margin，此时应改用zoom: 1替代overflow - 使用
display: inline-block的浮动替代方案时：IE6/7 对inline-block支持极差（仅对原生内联元素有效），不要试图绕过 hasLayout
hasLayout 不是“清除浮动的技巧”，它是 IE6/7 渲染引擎的底层前提 —— 忘记这点，所有 float 修复都只是碰运气。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
