ie6/7浮动异常本质是haslayout未触发，需用*zoom:1激活父容器layout，配合:before/:after双伪元素及display:table才能可靠清除浮动。
旧版 IE（IE6–IE8）里浮动元素显示异常，基本不是你 CSS 写错了，而是浏览器渲染引擎没触发 hasLayout，或者清除逻辑根本没生效——直接换方案比硬调更省时间。
IE6/7 中 float 元素不浮动、位置错乱？先看 hasLayout 是否激活
IE6/7 的 float 行为严重依赖内部渲染标志 hasLayout。没触发时，float: left 可能完全不生效，clear: both 也像没写一样。
-
zoom: 1是最安全的触发方式，加在**父容器**上（不是浮动子元素自己），现代浏览器忽略它，IE6/7 则立刻激活渲染路径 - 别用
height: 1%这类“伪高度”——某些字体设置下 IE6 会误判为 0，hasLayout依然不触发 - 如果浮动元素自己也要参与
clear计算（比如它是清除目标），那它也得单独加zoom: 1或display: inline
父容器高度塌陷，clearfix 在 IE6/7 里失效怎么办
现代写法 ::after { content: ""; display: table; clear: both; } 在 IE6/7 中压根不生成伪元素，因为它们不支持双冒号语法，且没 hasLayout 就不渲染伪内容。
- 必须降级为单冒号：
:before和:after，且两者都要写（IE6/7 对单伪元素支持不稳定） - 伪元素
display值优先用table，比block更可靠；overflow: hidden虽快但可能裁掉弹层或 Tooltip - 经典兼容写法必须带
*zoom: 1（仅 IE6/7 识别），否则父容器仍塌陷：.clearfix { *zoom: 1; }<br>.clearfix:before, .clearfix:after { display: table; content: ""; }<br>.clearfix:after { clear: both; }
IE6 双倍 margin、3px 下移、图片下方空白——都是行内格式化上下文惹的祸
这些不是独立 bug，而是浮动元素进入 IFC（行内格式化上下文）后，基线对齐和 line box 计算崩了的表现。
-
float+margin-left在 IE6 中实际渲染为两倍值？加*display: inline（注意星号前缀）可绕过，但前提是父容器已触发hasLayout - 浮动后紧跟的块元素莫名下移 3px？给它加
zoom: 1，强制重新计算 line box - 图片浮动后下方多出空白？
img { display: block; }最干脆；若需文字环绕，设父容器font-size: 0，再在文字上恢复字号
IE11 里 display: flow-root 被忽略，但 overflow: hidden 又裁内容
IE11 不支持 display: flow-root，也不吃 *zoom: 1，但它对 display: table 和 overflow: hidden 的行为又比 IE6/7 更敏感。
- 删掉所有
display: flow-root—— 它在 IE11 中等于没写，Autoprefixer 也补不出兼容写法 -
overflow: hidden在 IE11 中极容易裁掉position: absolute的下拉菜单或 Tooltip，比 Chrome/Firefox 更严格 - 稳妥方案：用
::after { display: block; clear: both; height: 0; overflow: hidden; }，height: 0避免撑高，overflow: hidden仅作用于伪元素本身
真正难处理的不是某一行代码怎么改，而是这些机制层层嵌套：hasLayout 没开 → 伪元素不渲染 → 清除失败 → 父容器塌陷 → 后续所有定位偏移。查问题时，先用 F12 看文档模式是不是被手动降成 IE6 Quirks，再逐层验证 hasLayout 是否触发——比盲试 hack 高效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
