图片一行排列突然换行，主因是float导致布局塌陷或inline元素的空白间隙；推荐用flex替代float，并通过font-size: 0或flex-shrink: 0等方案精准控制。
图片一行排列时突然换行，是margin还是float惹的祸
多张图片放一行却自动折行，大概率不是图片本身问题，而是父容器宽度不够、或浮动元素没被正确包裹。CSS里float会让元素脱离文档流，后续内容会“无视”它占位，导致布局塌陷——这是最常被忽略的根源。
实操建议：
- 检查图片是否设置了
float: left但父容器没清除浮动，此时用overflow: hidden或display: flow-root快速修复 - 确认图片外层是否有默认
margin或padding，特别是img在inline上下文中会受行高影响，加vertical-align: top能消除底部空白 - 如果图片宽高不一致，
float后高度参差会导致下一行提前上浮，优先统一用height+object-fit: cover
用flex替代float实现真正可控的一行排列
float本就不是为多图布局设计的，强行用它做响应式排列，后期改起来特别费劲。现代方案直接上display: flex，简单干净，还自带对齐和换行控制。
实操建议：
- 给图片容器设
display: flex，图片默认flex-shrink: 1，可能被压缩——加flex-shrink: 0锁住尺寸 - 想让图片等宽填满一行？用
flex: 1代替固定宽，但注意img需设width: 100%才生效 - 移动端要换行？加
flex-wrap: wrap，再配合min-width控制最小单图宽度，比媒体查询更轻量
clear:both失效了？可能是伪元素清除法没写对
还在用？这方法不仅冗余，还容易因HTML结构变动失效。真正的清除浮动应该靠CSS伪元素，但很多人漏写了content: ""或display: table，导致clear完全不生效。
实操建议：
- 推荐写法：
::after { content: ""; display: table; clear: both; }，缺任意一项都会失败 - 别把
clear加在图片自己身上——它只对“后续兄弟元素”起作用，不是用来防自身换行的 - 如果用了
position: absolute或transform，clear会彻底失效，这时候只能换flex或grid
图片间隙怎么总去不掉？inline元素的幽灵空白真存在
即使没写float，纯img标签并排也会有几像素间隙，这不是bug，是HTML把换行符和空格解析成空白字符，而img默认是inline元素，会受line-height和font-size影响。
实操建议：
- 最稳解法：给父容器设
font-size: 0，再单独给img设需要的font-size（其实不影响图片） - 次选：把
img标签写成一行不换行，或用注释掉HTML中的空白 - 别用
margin-left: -4px硬调——不同字体渲染下间隙值不同，换环境就错位
浮动和清除浮动只是过渡方案，现在只要支持IE11以上，flex就是默认选择；但如果你正在维护老项目，记住：清除浮动不是加个clear就行，得确保伪元素真实渲染且参与BFC。间隙问题也别死磕float，先确认是不是inline惹的祸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
