浮动布局图片换行错乱的根本原因是浮动脱离文档流后，浏览器仅粗略估算换行点，叠加图片尺寸差异、box-sizing计算误差及父容器塌陷所致；必须同步处理float、width、box-sizing及父容器bfc触发。
浮动布局下图片列表换行错乱，根本原因是浮动元素脱离文档流后，浏览器仅凭宽度+margin粗略估算换行点，而图片原始尺寸差异、盒模型计算误差（尤其box-sizing: content-box）、未清除浮动导致的父容器塌陷，三者叠加必然错行。直接改width: 50%没用，必须同步处理三件事。
为什么只调宽度和margin还是错位
常见现象：小屏下本该两列变一列，结果最后一张图卡在右侧、下方留白；或一张宽图占满整行，后面两张挤成一行还溢出。这不是“没写对百分比”，而是浮动机制本身不感知容器剩余空间——它只看当前行是否还能塞下下一个浮动项，且计算时把padding和border算进总宽（除非设了box-sizing: border-box）。
- 漏写
box-sizing: border-box→width: 50% + padding: 10px实际超100%，小屏必换行失败 - 父容器没触发BFC → 高度塌陷，后续内容上移覆盖图片，你以为“错行”其实是“被盖住了”
- 只设
float: left没配clear: left→ 每行首图没强制归位，第3张图可能紧贴第2张右边缘而非换行
必须配齐的浮动断点三件套
每个响应式断点（比如从两列切到一列）都要同时改三项，缺一不可：
- 子项加
float: none+width: 100%+box-sizing: border-box - 父容器加
overflow: hidden（推荐）或display: flow-root（语义更清，但IE不支持） - 间隙统一用
margin控制（别用padding），且断点内margin值要重置
示例（两列→一列）：
.image-list { overflow: hidden; }
.image-item { float: left; width: calc(50% - 12px); margin: 6px; }
@media (max-width: 767px) {
.image-item {
float: none;
width: 100%;
margin: 12px 0; /* 小屏改用上下margin，避免左右挤 */
}
}
比浮动更稳的替代方案
如果项目不要求兼容IE11以下，别硬扛浮动。现代浏览器（Chrome 60+、Firefox 63+、Safari 10.1+）全支持display: grid，一行代码解决所有错行：
.image-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.image-grid img {
width: 100%;
height: auto;
display: block;
}
关键点：repeat(2, 1fr)比50%健壮——它按容器剩余空间均分，自动规避margin/border导致的溢出；gap是原生间距，不触发外边距合并，也不影响最后一行对齐。
浮动换行错乱的根子不在“怎么写CSS”，而在“浮动本就不该干这个活”。真正容易被忽略的是：你改了子项的float和width，却忘了父容器是否还在塌陷——哪怕只漏掉overflow: hidden，整个列表就等于没修。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
