float: left 实现图片画廊隐患多：易塌陷、错行、缩放失真、压盖内容；需触发BFC（如display: flow-root）、设display: block、用max-width: 100%保比例、clear: left控换行；现代项目优先用grid或flex布局。
直接用 float: left 实现图片画廊，现在看是可行但隐患多的方案——它能快速排齐图片，但一旦漏掉清除浮动或宽高控制不当，画廊就会塌、错行、缩放失真，甚至压住下方内容。
图片加了 float: left 却垂直堆叠？检查父容器是否触发 BFC
浮动元素脱离文档流，父容器高度会塌陷为 0，视觉上所有图片“挤在顶部”，实际是后续内容上移覆盖了下层图片。这不是图片没排开，而是容器根本没“撑起来”。
- 最简修复：给父容器加
overflow: hidden或display: flow-root（推荐后者，语义清晰且无副作用） - 避免用
height: auto代替清除——它不解决塌陷，只是掩盖 - 别依赖
padding-bottom“假装撑高”，JS 动态插入图片时会立刻暴露问题
width 和 height 不生效？先设 display: block
图片默认是 inline 元素，浮动后虽转为行块级，但在部分浏览器（尤其旧版 Safari/IE）中，width/height 仍可能被忽略，导致尺寸失控。
- 必须显式写
display: block，这是浮动图片设宽高的前提 - 优先用
max-width: 100%+height: auto保比例，而非固定像素值（响应式场景更稳） - 单独设
height不设width会拉伸变形；用aspect-ratio配合容器约束更可靠
想每行固定张数（如 3 张）却换行错乱？用 clear: left 控制起始位
浮动靠宽度自动换行，但总宽计算受 margin/border/padding 影响，小数误差或四舍五入会让第 3 张“卡住”不换行，第 4 张紧贴右侧出现。
立即学习“前端免费学习笔记（深入）”；
- 更可控的做法：每行第一张图（或其父
<div>）加clear: left - 不要只靠
margin-right间距——它不参与换行判定，容易溢出 - 若用百分比宽度，确保
width + margin-left + margin-right总和 ≤ 33.33%，例如width: 30%; margin: 1.5%
为什么现代项目里越来越少用 float 做画廊？
不是它不能用，而是容错成本高：BFC 触发、清除浮动、宽高兼容、响应式断点、可访问性（float 会影响屏幕阅读器顺序）都得额外处理。一个 display: grid 或 display: flex 配 flex-wrap 就能规避全部问题，代码更短、逻辑更直、维护更省心。如果只是临时改个老项目，float 还能救；新项目起步，真没必要绕这个弯。
