Chrome 60–79非100%缩放下float掉行源于像素舍入缺陷：父宽缩放后为小数，50%子宽四舍五入累加导致总宽缺1px；calc(50%-0.5px)因旧版截断0.5px、缩放适配差、忽略border/padding而失效；可靠方案是flex布局，用flex:0 0 50%配合min-width:0防断行。
Chrome旧版本浮动布局在缩放时掉行的根源
这不是CSS写错了，是Chrome 60–79在非100%缩放下对float元素宽度计算存在像素舍入缺陷：当父容器宽度经缩放后变成小数（比如800.3px），再用50%算子元素宽，浏览器会先四舍五入子元素宽度，再累加——两个50%加起来可能比父容器少1px，导致第二个float被挤到下一行。
calc(50% - 0.5px)为什么常失效
这个写法看似聪明，实则踩中三个坑：
-
calc()里的0.5px在旧Chrome里会被直接截断为0px（不支持亚像素单位参与计算） - 减去固定
0.5px只对特定缩放比例（如125%）有效，换到110%或150%又不对了 - 如果父容器本身带
border或padding，50%本就不是你想要的“一半可用宽度”
真正可靠的替代方案：flex + min-width防断行
放弃float，改用display: flex是最彻底的解法——旧Chrome从61起已稳定支持基础flex布局，且不依赖像素舍入逻辑：
/* 替代原float左右两栏 */
.container {
display: flex;
}
.left, .right {
flex: 0 0 50%; /* 不伸缩、不收缩、基准宽50% */
min-width: 0; /* 防止内容撑破（尤其含长单词/URL时） */
}如果必须兼容极老Chrome（inline-block并用font-size: 0清除间隙更稳，比硬调calc靠谱得多。
立即学习“前端免费学习笔记（深入）”；
实在要修float就得动态补像素
若项目锁死不能动布局方式，只能靠JS微调——因为问题出在缩放后的实际像素值上，静态CSS无法响应：
- 监听
window.matchMedia('(resolution: ...dpi)')或window.devicePixelRatio - 用
getBoundingClientRect()读取父容器真实宽度，再按比例算出每个子项该占多少px - 把结果写进
style.width，绕过百分比计算路径
这招能治标，但别忘了：每次缩放、窗口 resize、甚至字体加载都可能触发重排，补的像素值得实时重算——这点很容易被忽略，一写就漏掉resize监听。
