float图片横向排布时换行是因为父容器宽度不足或未清除浮动，而非float失效；必须设置浮动元素明确宽度并合理预留间距，且应统一用float:left而非float:right以避免反序排列。
float图片横向排布时，为什么图片堆到一行就换行了？
因为 float 本身不控制“多少个并排”，只让元素脱离文档流、向左或右靠齐；真正决定能否塞进一行的，是父容器宽度和每个浮动元素的总宽度（含 margin/padding/border）。
常见错误现象：float: left 后图片看似横向了，但加第4张就掉到下一行——其实不是 float 失效，是父容器不够宽，或者没清浮动导致后续内容塌陷，误以为“排不下了”。
- 检查父容器是否设置了固定宽度，比如
width: 600px，而每张图加间距后宽度超出了 - 确认图片没有默认
display: block外的其他样式干扰（如vertical-align在 inline 场景才生效） - 浮动元素必须有明确宽度（
width或max-width），否则可能撑满父容器，无法并排
float:left 和 float:right 在图片横向布局里怎么选？
横向排布基本只用 float: left。用 float: right 虽然也能并排，但顺序会反转：HTML 里第一个 <img> 会贴最右边，第二个贴它左边……实际效果是“反序排列”，容易踩坑。
使用场景很明确：只要求从左到右依次排列图片，就统一用 float: left；需要右对齐整组图片（比如放在页面右侧），再给父容器加 text-align: right 或 float: right，而不是给每个 <img> 设 float: right。
-
float: left是横向并排的默认且安全选择 - 多个
float: right元素会从右往左“倒着填”，不符合直觉 - 若需响应式，
float本身无断点能力，得配合媒体查询重设宽度或改用其他方案
清除浮动（clear）为什么不能只写在最后一个图片后面？
因为 clear 的作用对象是“自身”，不是“前面所有浮动元素”。只给最后一张图加 clear: both，只能防止它被前面浮动影响，但父容器依然高度塌陷——这是最常被忽略的点。
错误示例：<img src="a.jpg" style="max-width:90%"><img src="b.jpg" style="max-width:90%"><img src="c.jpg" style="max-width:90%"> → 父容器仍无高度，后续内容会上浮。
- 正确做法是：在父容器末尾加一个空元素，
<div style="clear:both"></div> - 更常用的是触发 BFC，比如给父容器加
overflow: hidden或display: flow-root（后者兼容性稍差但语义清晰） - 现代项目中，
clear已基本被display: flex或display: grid替代，float仅用于兼容老浏览器或文字环绕图片等特定场景
float 图片横向排布的宽度设置要注意什么？
浮动元素必须有可计算的宽度，否则浏览器按内容宽度渲染，加上默认 margin 和 border，很容易超出预期。尤其当图片原始尺寸不一致时，问题更明显。
参数差异体现在：用 width: 200px 是强制等宽；用 max-width: 100% + height: auto 可保比例，但需确保父容器有宽度约束；用百分比（如 width: 30%）则依赖父容器宽度，且要预留 margin 宽度空间。
- 推荐组合：
float: left; width: 200px; margin-right: 10px;，最后子项用margin-right: 0避免多余空白 - 避免用
width: auto配float，结果不可控 - IE6/7 下
float元素若有margin，可能出现双倍边距 bug，需加display: inline
float 做横向图片布局本质是“借位”实现，不是为布局设计的机制。现在遇到要兼容 IE8 及以下才值得深究这些细节；否则直接上 display: flex 更省心，也更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
