如何让CSS浮动布局在老浏览器中更稳定？

旧版浏览器浮动解析差异的关键在于块化、盒模型和清除时机：必须为浮动元素显式添加display: block；统一使用box-sizing: border-box防止溢出；清除浮动需确保清除元素为块级且正确嵌套，避免依赖clear: both单点修复。

旧版浏览器（尤其是 Firefox 3.6–15、IE6–11、Android 4.x WebView）对 float 的解析差异不是“bug 多”，而是规范实现节奏不一致——稳定它的关键不是堆 hack，而是掐住三个确定性支点：块化、盒模型、清除时机。

必须给浮动元素加 display: block

旧版 Firefox 和 IE6/7 不会自动把 inline 元素（比如 <img> 或未设 display 的 <span>）在加 float 后转为块级。结果就是它仍按行内逻辑参与换行计算，导致“明明宽度够却掉行”。

常见问题表现：

1. <img src="..." style="float: left"> 下方多出空白，或右侧文字无法紧贴
2. 多个 float: left 的 <div> 在 Firefox 中总宽 99.99% 就换行，Chrome 却能挤下

实操建议：

1. 所有浮动元素显式声明 display: block（哪怕它本就是 <div>）
2. 图片浮动时，优先用 img { display: block; float: left; }，而非依赖默认行为
3. 避免对 <button>、<a> 等替换元素直接加 float，先设 display: inline-block 或 block

box-sizing: border-box 是浮动不溢出的底线

旧浏览器对 box-sizing: content-box 下的 padding + border 溢出容忍度极低。一个 width: 50% + padding: 10px 的浮动栏，在 Firefox 12 或 Android 4.3 里大概率直接被判定“放不下”，第二栏掉行。

使用场景：

1. 多列布局（如三栏 width: 33.333%）
2. 带边框/内边距的卡片、导航项
3. 任何需要精确横向占满父容器的浮动组合

实操建议：

1. 全局重置：* { box-sizing: border-box; }（IE8+ 支持，覆盖所有旧环境）
2. 不依赖 calc() 计算浮动宽度——旧 Safari 和 Android WebView 解析不稳定
3. 若必须用 margin 分隔，改用负 margin + 内边距组合，而非靠 width - margin 算术

清除浮动别只信 clear: both，得看它清在哪

clear: both 只对「紧挨着它的前一个浮动兄弟元素」生效。旧浏览器更严格：如果清除元素是 <div> 但父容器设了 font-size: 0，它的 line-height 会被压成 0，clear 彻底失效；如果清除元素自身有 margin-top，且小于浮动元素的 margin-bottom，两个 margin 会被合并，导致“清不到头”。

容易踩的坑：

1. 把 clear: both 加在浮动元素自己身上 → 完全无效
2. 用空 <div class="clear"></div> 但没设 display: block → 在某些 Android WebView 中不触发清除
3. 在 position: relative 父容器里清除，而清除元素又在另一个 stacking context 中 → Firefox 误判清除范围

实操建议：

1. 优先用 display: flow-root（Chrome 64+/Firefox 58+），一行解决，无副作用
2. 需兼容 IE11 或旧 Safari？用经典 .clearfix：.clearfix::after { content: ""; display: table; clear: both; } + .clearfix { *zoom: 1; }
3. 清除元素必须是块级、已渲染、未被隐藏；若它是 <span>，先加 display: block

安卓 WebView 和 IE6 的双倍 margin Bug 必须单独处理

Android 4.1–4.3 和 IE6 都存在同一个底层问题：对已设 float: left 的元素再加 margin-left 或 margin-right，实际渲染为两倍值。这不是样式写错，是渲染引擎历史遗留行为。

典型表现：

1. 三栏浮动，每栏 width: 33.333% + margin-right: 10px，第三栏必掉行
2. 导航项 hover 时突然“跳一下”，其实是 margin 翻倍后重排

实操建议：

1. IE6：仅对出问题的元素加 *display: inline;（星号前缀仅 IE6 识别）
2. Android 4.x：避免在浮动元素上直接写 margin，改用父容器 padding 或子容器 margin 控制间隙
3. 检测手段：用 Chrome DevTools 模拟 Android 4.3，手动缩窄 viewport 到临界像素值，看是否突变

真正麻烦的从来不是某一行清除代码写没写对，而是浮动本身在旧浏览器中和 line-height、white-space、sub-pixel 四舍五入、hasLayout 触发条件这些底层机制耦合太深——稍一松动，整条链就抖。所以当你要同时支持 Firefox 12、IE11、Android 4.4，还要求滚动不抖、缩放不乱，最省事的“稳定方案”，其实是删掉所有 float，换 display: flex。