浮动塌陷致父容器高度为0，因浮动元素脱离文档流；IE6–8存在双倍边距、3像素bug等兼容问题；推荐用overflow:hidden触发BFC或display:inline修复，新项目优先用flex并注意IE10前缀。
浮动元素塌陷导致父容器高度为0
这是浮动布局最典型的兼容性表现：IE6–8中父容器不包裹浮动子元素，现代浏览器虽已修复但旧项目仍可能遇到。根本原因是浮动元素脱离文档流，父容器无法自动计算高度。
解决方式不是加 height（破坏响应式），而是触发 BFC 或清除浮动：
- 推荐用
overflow: hidden或overflow: auto（IE7+ 支持，且不影响语义） - 避免用
display: inline-block清除——在 IE6/7 中会额外产生 4px 间隙 - 慎用
::after伪元素清除法（content: ""+clear: both）：IE6–7 不支持::after，需降级为:after并配合zoom: 1触发 hasLayout
IE6双倍边距bug（float + margin）
IE6 中对向浮动方向的 margin 会被渲染成两倍值，比如 float: left; margin-left: 10px 实际显示为 20px。
这不是 CSS 解析错误，而是 IE6 渲染引擎对浮动元素的盒模型计算缺陷：
立即学习“前端免费学习笔记（深入）”；
- 唯一可靠解法是给浮动元素加
display: inline（IE6 下可消除双倍 margin，且不影响布局） - 不要试图用
*margin-left: 5px修复——这属于 hack，维护成本高且现代浏览器无需 - 如果使用了
display: inline-block，必须同时加zoom: 1和*display: inline才能兼容 IE6–7
浮动元素顺序与文档流错位（IE6–7中的“3像素bug”）
IE6–7 中，当浮动元素后紧跟一个普通块元素时，后者顶部会莫名下移约 3px，看起来像有不可见的 margin。
本质是 IE6–7 对浮动和非浮动元素混排时的行框（line box）计算异常：
- 最简方案：给后续非浮动元素加
zoom: 1（触发 hasLayout） - 或统一让所有相关元素浮动（但需注意清除，否则父容器又塌陷）
- 避免依赖
vertical-align调整——该属性在非 inline/inline-block 元素上无效，且 IE6 行为不一致
flex 替代方案的兼容性取舍
现在写新项目基本不用纯 float 布局，但若需支持 IE10+，display: flex 仍需前缀和 fallback：
- IE10 需要
display: -ms-flexbox，且语法差异大（如flex-direction在 IE10 是-ms-flex-direction） - 不能只靠 Autoprefixer —— 它不处理 IE10 的老 flex 语法，需手动补全或用 postcss-flexbugs-fixes
- 若目标包含 IE9 及以下，仍得用 float + clearfix，此时建议封装一个
.clearfix类并全局复用，而非每个地方重复写伪元素
