float: left 配合 margin 无法可靠实现多行图片自动换行，因浮动导致父容器塌陷、换行仅看当前行剩余宽度、margin 加剧错位与对齐问题；推荐用 flex 或 inline-block 替代。
float: left 配合 margin 实现多行图片自动换行的核心限制
直接用 float: left + margin 无法可靠实现“多行自动换行”，因为浮动元素脱离文档流后，父容器高度塌陷，且最后一行元素可能因剩余空间不足而错位或溢出。浏览器对浮动换行的判定只看**当前行剩余宽度是否够放下下一个浮动块**，不考虑后续元素或行高对齐，容易出现“最后一张图掉到下一行但左边悬空”的经典问题。
为什么 margin 会加剧换行不可控
margin（尤其是右/下边距）会占用浮动元素的可用空间，但浮动换行逻辑只检查元素自身的 width + margin-left + margin-right 是否 ≤ 当前行剩余宽度。一旦某张图加上左右 margin 后超宽，它就会被挤到下一行——即使视觉上你希望它“紧贴前一张图右边”。更麻烦的是：不同图片宽高不一致时，margin-bottom 还会导致下一行起始位置参差不齐。
- 同一行中，
margin-right累加后可能让整行“看起来有空隙”，但浮动引擎只认硬性宽度阈值 -
margin-bottom不参与换行计算，却影响下一行的垂直对齐基准线 - 没有清除浮动（
clear: both）时，后续非浮动内容会从浮动区域旁绕流，进一步破坏布局预期
真正可行的替代方案：display: inline-block 或 flex
现代项目应放弃纯 float 布局多图网格。两个轻量、兼容性好、行为确定的方案：
方案一（推荐）：flex 布局
立即学习“前端免费学习笔记（深入）”；
.image-grid {
display: flex;
flex-wrap: wrap;
gap: 12px; /* 替代 margin，语义清晰且不干扰换行 */
}
.image-grid img {
flex: 0 0 calc(33.333% - 8px); /* 每行3张，gap 占用 12px → 每侧分摊 6px，所以减 8px 更稳妥 */
height: auto;
}方案二（兼容 IE10+）：inline-block + text-align
.image-grid {
font-size: 0; /* 消除 inline-block 默认间隙 */
text-align: left;
}
.image-grid img {
display: inline-block;
width: calc(33.333% - 8px);
margin: 0 4px 4px 0; /* 右/下留白，最后一列需额外处理（如 nth-child(3n) { margin-right: 0; }）*/
vertical-align: top;
}如果必须用 float，请严格控制每行数量并手动清浮动
仅适用于固定列数、图片尺寸一致的简单场景。关键点：
- 用
width精确计算每张图（含 margin）所占空间，确保n × (img-width + margin-left + margin-right)≤ 容器宽度 - 每行末尾插入一个带
clear: both的空元素，或给父容器设置::after伪元素清除浮动 - 避免用
margin-bottom控制行间距，改用父容器的padding-bottom或相邻行之间的margin
例如三列布局：
.image-grid::after {
content: "";
display: table;
clear: both;
}
.image-grid img {
float: left;
width: calc(33.333% - 12px); /* 假设左右 margin 各 6px */
margin: 0 6px 12px 0; /* 下边距统一为 12px，由 clear 控制行结束 */
}
.image-grid img:nth-child(3n) {
margin-right: 0; /* 清除最右一列的右空隙 */
}浮动的本质是文本环绕机制，不是网格系统。哪怕参数调得再精确，只要图片加载异步、字体渲染差异、缩放比例变化，就可能打破预设的宽度判断。真正要“自动换行”，就得交给 flex-wrap 或 grid 这类专为布局设计的模型。
