缩放时浮动错位不是浏览器 bug，而是 float + content-box + 百分比宽度 + 亚像素四舍五入共同触发的必然结果；应全局设 box-sizing: border-box 并改用 flex 或 flow-root 替代 float。
缩放时浮动错位不是浏览器 bug，而是 float + content-box + 百分比宽度 + 亚像素四舍五入共同触发的必然结果；真正该动的是盒模型和布局方式，不是清浮动或加 hack。
box-sizing: content-box 是错位的起点
默认 box-sizing: content-box 让 width: 50% 不包含 padding 和 border，实际总宽常超 50%。缩放后浏览器对小数像素（如 375.3px）强制四舍五入，两列加起来就少 1px 或多 1px，直接换行或露白。
- 只给子元素设
box-sizing: border-box不够——父容器若仍用content-box，子元素按 100% 算出的宽度还是会溢出 - 必须全局写：
* { box-sizing: border-box; }或更稳妥的*, *::before, *::after { box-sizing: border-box; } - 第三方 UI 库（如 Element Plus）可能已覆盖该规则，要在 DevTools 的 Computed 面板里确认
box-sizing的“来源”
display: flow-root 比 clearfix 更治本
clearfix 只解决父容器高度塌陷，不干预宽度计算逻辑；overflow: hidden 虽能触发 BFC，但会裁剪 position: absolute 的下拉菜单、阴影等溢出内容。而 display: flow-root 是专为包裹浮动设计的现代方案。
- 一行声明：
.container { display: flow-root; }，父容器立刻包含所有浮动子项，且不裁剪任何溢出 - 兼容性足够：Chrome 64+ / Firefox 58+ / Safari 15.4+，IE11 及以下需降级用
clearfix - 别在子元素上加
flow-root——它应作用于浮动的直接父容器，否则可能干扰嵌套布局
float 不该承担响应式布局职责
浮动本为图文环绕设计，脱离文档流、宽度不可控、不参与父容器 layout 计算。缩放只是把它在响应式场景下的缺陷放大了而已。
- 迁移成本极低：
.container { display: flex; }+ 子元素删掉float，行为基本一致 - Flex 下无需手动清浮动，
flex-wrap: wrap天然适配缩放，gap替代 margin hack - JS 中隐式依赖浮动位置的代码（如
offsetTop、getBoundingClientRect()）必须重测——坐标值会变
真正难的不是改 CSS，是识别哪些 JS 逻辑假设了浮动已生效；不翻业务代码，只调样式，错位大概率修不完。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
