IE6–IE8浮动兼容性问题核心在于是否继续使用float；IE6/7双倍边距bug由怪异模式触发，可用display:inline或DOCTYPE修复；父容器塌陷需按浏览器版本分层清除；图文混排图片空白源于基线对齐，推荐img{display:block}。
IE6–IE8 的浮动兼容性问题，核心不是“怎么修”，而是“要不要继续用 float”。如果你的项目真要跑在 IE6/7 上，display: inline 和 *zoom: 1 是绕不开的两个关键点；但若只支持 IE11，display: flow-root 无效，overflow: hidden 又容易裁剪弹层——得换一套清除逻辑。
IE6/7 双倍边距 bug 怎么止血？
现象：float: left 元素设了 margin-left: 10px，实际渲染成 20px。这不是 margin 写错了，是 IE6/7 渲染引擎在 hasLayout 触发后对盒模型的误解析。
-
display: inline是最轻量、无副作用的解法：IE6/7 识别，其他浏览器忽略，且不破坏 width/height 或伪元素 - 别用
*margin-left: 5px这类 hack——构建工具（如 PostCSS）可能静默删掉带星号的规则，留下未修复的 bug - 更推荐重构：把左右 margin 挪到父容器上用
padding控制，或套一层非浮动 wrapper 再设 margin - 注意：这个 bug 只在怪异模式（Quirks Mode）下触发；
<!DOCTYPE html>能直接让它消失——先按 F12 看文档模式，别急着加 hack
父容器高度塌陷，在 IE6–IE11 怎么安全清除？
所有浏览器都会塌陷，但清除方式差异极大：IE6/7 不认 ::after，IE11 不吃 display: flow-root，overflow: hidden 在 IE11 下又特别容易裁掉 position: absolute 的下拉菜单。
- IE6/7 必须双保险：
*zoom: 1（触发 hasLayout） +.clearfix:before, .clearfix:after（单冒号，display: table） - IE8–IE10 可简化：
.clearfix::after { content: ""; display: table; clear: both; }就够，*zoom: 1和:before可删 - IE11 要避开
display: table的兼容风险，改用：.clearfix::after { content: ""; display: block; clear: both; height: 0; overflow: hidden; } - 千万别给
display: flex或display: grid容器加 clearfix——float 在它们内部被忽略，class 白加
图文混排时图片下方空白怎么灭？
这不是 padding/margin 问题，是浮动元素进入行内格式化上下文（IFC）后基线对齐导致的间隙，IE6 表现最明显。
立即学习“前端免费学习笔记（深入）”；
- 最快止血：
img { display: block; }，彻底脱离行内流 - 若需文字环绕，设父容器
font-size: 0，再在文字上单独恢复字号（注意继承链，font-size必须显式重置） -
vertical-align对浮动img基本无效——IE6 不认，且浮动已脱离 line box，没 baseline 可对齐 - 别用
line-height或负margin-bottom微调：治标不治本，换字体或缩放页面就露馅
真正难处理的不是怎么写，而是它藏在哪一行：display: inline 可能埋在某个十年没动过的 @import 进来的 reset.css 里，也可能在 header.less 中某行写着 /* IE6 double margin fix — but DOCTYPE is html5 */。这种注释比代码更重要——它告诉你，这一行早该删了。
