IE6/IE7中float元素左右margin翻倍是真实Bug，根源为hasLayout触发后margin解析错误；修复可用display:inline或改用父容器padding/非浮动wrapper。
IE6/IE7 的 float 元素左右 margin 翻倍了怎么办
这是真实存在的 Bug：给 float: left 或 float: right 的元素直接设 margin-left 或 margin-right，IE6/IE7 会把它算成两倍。根源是浮动触发了 hasLayout，但解析 margin 时出错。
- 最轻量的修复：加一句
display: inline—— IE6/7 识别，其他浏览器忽略，完全无副作用 - 更推荐的做法：别在浮动元素上直接写左右 margin，改用父容器 padding 控制外间距，或用非浮动的 wrapper 包一层再设 margin
- 慎用 CSS hack（比如
*margin-left: 10px），它会让样式表变脆弱，且现代构建工具可能自动剔除带星号的规则
父容器高度塌陷，在老浏览器里怎么安全清除浮动
所有浏览器都会塌陷，但清除方式兼容性差。IE6/7 不支持 ::after 伪元素，所以现代 clearfix 写法（content: "" + clear: both）直接失效。
-
overflow: hidden是最常用解法，但它可能意外裁剪子元素（比如下拉菜单、弹层）或触发滚动条 - 稳妥的兼容方案：用经典 clearfix 类，靠 zoom 触发 hasLayout +
clear: both，能稳住 IE6+ 所有版本 - 不建议依赖
float做整页布局来规避这个问题——塌陷只是表象，真正难缠的是对齐控制弱、响应式难适配
图文混排时图片下方多出空白，尤其在 IE6
这是浮动 + 行内格式化上下文（IFC）共同导致的基线对齐问题。IE6 表现最明显：图片浮动后底部总有一条看不见的“空隙”。
- 快速止血：给图片加
display: block，彻底脱离行内流 - 若需保留文字环绕，可设父容器
font-size: 0，再在文字上单独恢复字号（注意子元素继承） - 别依赖
vertical-align在 IE6/7 对浮动元素生效——它基本不认这个属性，显式设top或middle也常无效
float 布局还能用吗？哪些场景真绕不开
能用，但得清楚边界：不是所有“看起来像浮动”的需求都该用 float，也不是所有旧浏览器兼容都要靠它兜底。
立即学习“前端免费学习笔记（深入）”；
- 唯一不可替代的场景：纯文本内容中实现文字环绕图片——
float: left/right仍是目前唯一稳定、无需 JS、不破坏语义的方案 - 简单两栏布局（如侧边栏+主内容）仍可用，但必须配套处理塌陷、双倍 margin、垂直对齐等老问题
- 如果项目还需支持 IE10 及以下，
flex就不能直接上；但若只保 IE11，用display: -ms-flexbox加前缀比硬扛 float 更可持续
真正容易被忽略的点是：很多所谓“兼容需求”，其实来自内部测试环境滞后的 IE 模拟器，而不是真实用户。上线前务必用真 IE6/7 虚拟机验证，别让 hack 叠 hack 掩盖了实际问题。
