核心问题是box-sizing:content-box导致百分比宽度加padding/border后超限，缩放时亚像素四舍五入引发换行或间隙；应全局设box-sizing:border-box并改用flex布局替代float。
浮动布局在缩放时乱掉，不是浏览器 bug，而是 float + 百分比 + 默认盒模型 + 缩放渲染机制共同作用的必然结果。核心问题不在“怎么清浮动”，而在“浮动本身就不该承担响应式布局职责”。
缩放时 float 元素突然换行或间隙变大
典型现象：100% 缩放正常，拉到 125% 或 75% 后右侧元素掉到下一行、两列之间出现 1px 空隙、边框粗细看起来不一致。
- 根本原因是
box-sizing: content-box（默认值）让width: 50%+padding: 8px+border: 1px实际总宽 ≈ 50.03%，缩放后亚像素被四舍五入，累加就缺 1px - 父容器若设了
overflow: hidden或transform，可能干扰 BFC 形成，导致清除浮动失效，间接放大错位 -
calc(50% - 0.5px)在旧 Chrome 里会被截断为calc(50% - 0px)，纯属白写；且固定减 px 值只对某几个缩放比例有效
移动端 user-scalable=yes 让 float 错位更明显
iOS Safari 和部分安卓 WebView 在开启手势缩放时，会动态调整设备像素比（DPR）和 layout width，但 float 的宽度计算仍基于缩放前的视口尺寸，造成百分比换算失准。
-
user-scalable=yes不是可选项，而是错位的“放大器”——它让亚像素偏差在每次捏合/拉伸时反复触发 -
initial-scale=1.0必须显式声明，否则横屏切换可能重置缩放，引发二次错位 - 禁用缩放（
user-scalable=no）能止血，但牺牲可访问性；maximum-scale=1.0是更柔和的折中
为什么 min-width / clear / overflow 都治标不治本
这些操作不改变浮动元素的宽度计算逻辑，也不修正渲染取整行为，只是在错误链条下游做补救。
立即学习“前端免费学习笔记（深入）”；
-
min-width对width: 50%的子元素完全无约束力——百分比优先级高于min-width -
overflow: hidden在 Android 4.4 以下 WebView 中常因transform或position: relative失效，无法触发 BFC -
clearfix只解决父容器高度坍缩，不干预子元素宽度溢出；甚至在某些场景下，伪元素自身因display: table触发旧渲染路径，反而加重抖动
真正该动手的地方只有三个
修复动作越靠近布局根节点，效果越稳定。别在子元素上打补丁，直接改 display 类型。
- 全局加
* { box-sizing: border-box; }——这是成本最低、见效最快的一步，但必须父子同设才有效 - 把主布局从
float换成display: flex：.container { display: flex; }+.item { flex: 0 0 50%; min-width: 0; }，旧 Chrome 61+ 已稳定支持 - 图片等媒体元素加
max-width: 100%和height: auto，防止原始尺寸破坏百分比流
最后注意：真机双指连续缩放比 DevTools 模拟更严苛，抖动点往往出现在 110%、125%、150% 这些非整数倍率上——这些才是真实用户会卡住的地方。
