父容器未触发 BFC 导致浮动图片堆叠；需设 overflow:hidden 或 display:flow-root；多图横向排列推荐 flex+flex-wrap:wrap，注意声明宽高防抖动。
float 左浮动 + 宽度固定后图片不换行？检查父容器是否触发 BFC
多图横向排列用 float: left 是常见做法，但加了固定宽度后图片仍垂直堆叠，大概率是父容器没“撑开”或内部未清除浮动。CSS 中 float 元素会脱离文档流，父容器高度塌陷，视觉上就变成“只显示第一张图”或“全部挤在顶部”。
- 确保父容器有明确的
width或设置了overflow: hidden/display: flow-root来触发 BFC（块级格式化上下文） - 每张图必须设
width（如width: 200px），且总宽度不能超过父容器 — 否则最后一张会被挤到下一行 - 避免给图片加
margin-right却忘了最后一张：用:not(:last-child)控制更安全
用 inline-block 替代 float 更可控？注意空白符会占位
display: inline-block 确实能绕过 float 的清除问题，但 HTML 中图片标签间的换行或空格会被渲染成约 4px 的空白间隙，导致横向排不满。
- 解决方法一：把
<img>标签写在同一行，消除 HTML 换行 - 解决方法二：父容器设
font-size: 0，子元素再单独设font-size（仅当子元素含文字时需还原） - 兼容性上，
inline-block在 IE8+ 完全可用，比flex更稳妥，但无法像 float 那样让文字环绕
现代方案用 flex 实现自动横向排列，但别漏掉 flex-wrap
如果目标浏览器支持 Flexbox（IE10+），display: flex 是最干净的解法 —— 不用清浮动、不被空白符干扰、响应式也方便。但默认 flex-wrap: nowrap，一旦图片总宽超容器，就会溢出而非换行。
- 横向铺满：父容器设
display: flex+flex-wrap: nowrap（默认值，可省略） - 允许折行：显式写
flex-wrap: wrap，否则超出部分直接隐藏或滚动 - 图片建议用
flex: 0 0 auto（不放大不缩小，按原始尺寸）或flex: 0 0 200px（强制等宽） - 注意 Safari 旧版本对
flex-basis解析有差异，固定宽推荐直接写width
图片加载后宽度抖动？用 aspect-ratio 或 padding-top 做占位
图片异步加载时，若没设宽高，加载瞬间会重排布局，造成横向浮动错位甚至跳动。尤其在慢网或懒加载场景下明显。
立即学习 “ 前端免费学习笔记（深入）”；
- 最佳实践：提前在
<img>上写死width和height属性（非 CSS），浏览器可据此预留空间 - CSS 方案：用
aspect-ratio: 4/3（Chrome 88+ / Firefox 89+）配合width: 100%，保持比例不拉伸 - 兼容老浏览器：用
padding-top百分比占位（需父容器position: relative，图片position: absolute）
实际项目里最容易被忽略的是图片宽高未声明导致的布局重排，以及 flex 容器忘记设 flex-wrap 导致内容溢出不可见。这两个点不报错，但效果完全不对，调试时得往 DOM 渲染逻辑里多看两眼。
