优先推荐CSS Grid方案，因其能按行列严格对齐、避免浮动塌陷；次选固定容器+object-fit实现图片等比缩放；float仅作兼容补救，需清除浮动并设min-height和vertical-align。
浮动图片大小不一致导致换行错位，本质是浮动元素高度不同，破坏了文档流的垂直对齐基准。解决的关键不是强行拉伸图片，而是让容器尺寸可控、内容自适应。
统一容器尺寸 + object-fit 控制图片显示
给每个图片外层套一个固定宽高的容器（如 div），再让图片在其中等比缩放填充或居中显示：
- 容器设为
width: 200px; height: 150px;，并加overflow: hidden; - 图片设为
width: 100%; height: 100%; object-fit: cover;（裁剪填充）或contain;（完整显示） - 避免直接对
img设固定宽高，否则会拉伸变形
改用 CSS Grid 替代 float，天然对齐
Grid 能按行列严格控制布局，彻底避开浮动塌陷和高度不一的问题：
- 父容器设
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)))); gap: 12px; - 每个图片项无需浮动，直接作为 grid item；可配合
aspect-ratio或固定容器 +object-fit - 响应式友好，列数随屏幕自动调整，换行整齐不偏移
若必须用 float，至少清除浮动并限制行高
临时兼容旧代码时，可用以下补救措施：
- 每行结尾加
或用伪元素清除浮动 - 给浮动容器设
min-height（如min-height: 150px;），避免高度过低影响下一行 - 图片统一用
vertical-align: top;防止默认基线对齐带来的错位
基本上就这些。优先推荐 Grid 方案，语义清晰、维护简单、对齐稳定。object-fit + 固定容器是稳妥的兜底做法。float 已逐渐被现代布局替代，除非兼容性要求极严，否则不建议继续依赖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
