图片默认不换行因其为inline元素，需通过父容器设flex-wrap: wrap或grid-template-columns实现自动换行，同时注意宽高预留与兼容性处理。
图片不换行是因为默认 inline 行内行为
HTML 中 <img> 默认是 inline 元素，会像文字一样挤在一行里，超出容器宽度就溢出或横向滚动——这不是 bug，是规范行为。要让它“自动换行”，本质是改变其布局上下文。
常见错误现象：图片堆成一横条、右侧被截断、父容器没高度、margin 不生效
- 别给
<img>直接加display: block就以为完事了——单个 block 是换行了，但多个仍需额外处理包裹逻辑 - 用
float已过时，且清除浮动容易漏，现代项目应避免 -
white-space: nowrap在父元素上会强制禁用换行，检查是否误设
用 flex 布局最稳：父容器设 display: flex + flex-wrap: wrap
这是目前兼容性好（IE10+）、控制力强、语义清晰的主流解法。关键不在图片本身，而在它的直接父容器。
使用场景：图库列表、响应式相册、商品缩略图网格
立即学习“前端免费学习笔记（深入）”；
- 父容器加
display: flex和flex-wrap: wrap，子<img>保持默认inline或显式设display: block都可 - 想等宽排列？加
flex-basis或配合min-width控制最小宽度，例如：img { min-width: 200px; } - 注意 IE10/11 对
flex-wrap支持不全，若必须兼容，改用display: -ms-flexbox+-ms-flex-wrap: wrap
div.gallery {
display: flex;
flex-wrap: wrap;
gap: 8px; /* 推荐用 gap 替代 margin，更干净 */
}
div.gallery img {
max-width: 100%;
height: auto;
}纯 CSS Grid 更适合固定列数布局
如果你明确要“每行 3 张”“每行 4 张”，Grid 比 Flex 更直接，不用依赖内容宽度计算换行点。
性能影响：Grid 渲染开销略高于 Flex，但对几十张图以内几乎无感；兼容性要求 Chrome 57+/Firefox 52+/Safari 10.1+
- 父容器设
display: grid+grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))，自动填满且响应式 - 避免写死列数如
repeat(3, 1fr)，否则小屏下图片会被强行压缩 -
grid-auto-rows可统一行高，防止图片高度不一导致错位
div.grid-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
}
div.grid-gallery img {
width: 100%;
height: 160px; /* 可选，统一高度 */
object-fit: cover;
}别忽略图片加载失败时的换行断裂问题
当某张图 404 或加载慢，<img> 默认占位高度为 0（尤其设了 height: auto），可能让整行塌陷、后续图片上移错位。
容易被忽略的地方：没有 fallback 尺寸、没设 aspect-ratio、JS 动态插入图后未触发 layout 重排
- 给
<img>加aspect-ratio: 4/3（支持度 Chrome 88+/Firefox 89+），或退化方案：padding-top: 75%+position: relative+img绝对定位 - 加
loading="lazy"时，注意 Safari 旧版对 lazy 图的尺寸计算不准，建议配合width/height属性 - 服务端返回 HTML 时，尽量带
width和height属性，浏览器能提前预留空间
图片换行看着简单，真正卡住人的往往不是布局方式，而是没意识到「换行」背后牵扯的是盒模型、加载时机、宽高预留、以及不同浏览器对空内容的渲染差异。把父容器布局定清楚，再补上尺寸兜底，基本就没意外了。
