根本原因是未统一box-sizing、font-size/line-height/vertical-align及亚像素渲染差异：content-box导致宽度计算偏差，字体渲染微差放大临界错位，必须全局设*{box-sizing:border-box}、重置排版属性并改用flex/grid。
浮动布局在不同浏览器显示不一致，不是“浏览器 bug”，而是你没切断盒模型、排版基线和渲染精度这三处默认差异的传播链——只要其中一环漏控，临界宽度下就可能差 1px，直接换行或错位。
box-sizing 默认值不统一，宽度计算从根上就偏了
所有现代浏览器默认用 content-box，但这个值对浮动极其危险：你写 width: 200px; padding: 10px; border: 1px，真实占宽是 222px。而不同浏览器对字体、行高、内联元素基线的渲染微差，会让这个“222”在 Chrome 算成 222.3px（四舍五入为 222），Firefox 算成 221.6px（取整为 221）——两列加起来就超限。
- 必须用
*, *::before, *::after { box-sizing: border-box; }，且这条规则要放在所有 CSS 文件最顶部 - 别只给浮动项加
box-sizing: border-box：按钮、图标、伪元素都可能漏掉，任一子元素用content-box就是隐患 - 检查第三方 CSS（如 normalize.css 或 Bootstrap）是否覆盖了你的通配规则；在 DevTools 的 Computed 面板里点开
box-sizing，看“来源”是不是你写的那条
font-size / line-height / vertical-align 影响内联上下文对齐
浮动常和文字、图片混排，而这些属性的默认值在 Safari、Chrome、Firefox 中并不一致。比如 line-height 影响 vertical-align: baseline 的基线位置，图片浮动后底部留白就是典型表现；font-size 不统一还会让 em 单位的宽度跨浏览器漂移 1–2px。
- 全局重置：
body { font-size: 16px; line-height: 1.5; } - 图片一律加：
img { vertical-align: top; }，别依赖默认 baseline - 慎用
system-ui这类系统字体栈——macOS 和 Windows 渲染同一段文字宽度可差 1.2px，浮动并排时极易临界溢出
安卓 WebView 和旧 Safari 的浮动渲染缺陷不能靠清除解决
在 Android 4.1–4.3 或 Safari 14–15 中，浮动“掉行”或抖动，往往不是 clear 没写对，而是底层渲染管线对 float 定位基准处理不一致：滚动时反复重算偏移、scroll-snap 锚点漂移、甚至双倍 margin（IE6 风格 Bug 在低版本 WebView 复现）。此时 overflow: hidden 或 ::after 清除完全无效。
立即学习“前端免费学习笔记（深入）”；
- 优先弃用
float：用display: flex或display: grid替代，它们原生支持 subpixel 分配与自动重排 - 若必须保留浮动，避免和
transform、will-change共存；父容器改用display: flow-root而非overflow: hidden - 测试时真机双指缩放，观察连续缩放过程中的抖动——这是亚像素四舍五入最真实的暴露方式
真正麻烦的不是写不对那几行 CSS，而是浮动布局中每一层嵌套（从伪元素到 SVG 图标）都可能引入新的尺寸变量；只要有一个没被 border-box 覆盖，就可能成为压垮一致性的最后一像素。
