浮动图片错位本质是浮动脱离文档流导致父容器高度塌陷，叠加box-sizing未统一引发的sub-pixel渲染误差；应改用display: flow-root建立BFC或直接迁移到Grid/Flex布局。
浮动布局中图片错位，根本不是图片本身的问题，而是浮动脱离文档流 + 尺寸不可控 + 渲染精度叠加导致的连锁反应。直接修图宽高或加 clear 只能临时遮掩，真正要动的是布局模型和盒模型基准。
为什么float一加，图片就“飘”了？
浮动元素从文档流中被抽走，父容器计算高度时直接忽略它——哪怕里面塞了五张图，computed height 也可能为 0px。后果就是：背景消失、边框不显示、后续内容顶上来，看起来像图片随机乱飞。
- 用 DevTools 的 Layout 面板勾选 “Show box model”，一眼看出父容器是否包裹子项
- 临时加
overflow: hidden，如果错位立刻消失，基本可断定是塌陷问题 -
float的设计本意是文字绕图，不是做栅格布局——别把它当 Grid 用
用display: flow-root止血最干净
它让父容器建立新的 BFC（块级格式化上下文），天然包含所有浮动子项，高度自动撑开，不裁剪、不干扰伪元素、不破坏 margin 合并。
- 只需一行：
.container { display: flow-root; } - 兼容性够用（Chrome 64+ / Firefox 58+ / Safari 12.1+），2026 年已无兼容压力
- 比老式
::after清除法更轻量，不污染 HTML，也不需要写content: ""和clear: both - 避免用
overflow: hidden—— 它本质是裁剪，一旦内部有position: absolute或transform位移，就会意外截断
box-sizing: border-box必须全局设，否则白改
缩放错位、Retina 下 1px 虚边、两列浮动掉行……90% 是 box-sizing: content-box 在作祟。百分比宽度 + padding + border 在 sub-pixel 渲染下会被四舍五入，导致总宽超 100%。
立即学习“前端免费学习笔记（深入）”；
- 必须写：
* { box-sizing: border-box; }或更稳妥的*, *::before, *::after { box-sizing: border-box; } - 只给浮动子元素设没用——父容器若仍用
content-box，它的可用宽度已缩水 - 第三方 UI 库（如 Element Plus）可能已设，先检查再覆盖，别暴力重置
- IE7 及以下不支持，但 2026 年绝大多数项目已无需考虑
别硬撑了，直接换grid或flex
浮动不是布局工具，是文字环绕的遗留 hack。现代方案三行代码就能解决所有错位根源：
- 等宽自适应图片墙：
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; - 图文混排对齐：
display: flex; align-items: flex-start; gap: 12px; - 图片统一尺寸不拉伸：
img { width: 100%; height: 100%; object-fit: cover; }，外层容器设固定宽高或aspect-ratio - 响应式断点里，浮动的清除逻辑极易失效；而 Grid/Flex 的
minmax()和auto-fill天然适配
最容易被忽略的是：PC 上调好的浮动，在平板缩放到 125% 时，box-sizing 没统一会立刻掉行；而 Grid 的轨道计算完全绕过 sub-pixel 累积误差。
