旧版浏览器浮动解析差异的关键在于块化、盒模型和清除时机：必须为浮动元素显式添加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 元素（比如 或未设 display 的 ）在加 float 后转为块级。结果就是它仍按行内逻辑参与换行计算，导致“明明宽度够却掉行”。

常见错误现象：

• 下方多出空白，或右侧文字无法紧贴
• 多个 float: left 的
  在 Firefox 中总宽 99.99% 就换行，Chrome 却能挤下

  实操建议：

  

  page-agent 浏览器控制（CDP）

  使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

  下载

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

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

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

  使用场景：

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

  实操建议：

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

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

  clear: both 只对「紧挨着它的前一个浮动兄弟元素」生效。旧浏览器更严格：如果清除元素是

  但父容器设了 font-size: 0，它的 line-height 会被压成 0，clear 彻底失效；如果清除元素自身有 margin-top，且小于浮动元素的 margin-bottom，两个 margin 会被合并，导致“清不到头”。

  容易踩的坑：

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

  实操建议：

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

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

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

  典型表现：

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

  实操建议：

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

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