图片间空隙源于img作为inline元素响应html空白符，即使Float:left也无法消除；解决需设父容器font-size:0或删空白，而非仅调margin。
用 float: left 排图片时，为什么图片之间有空隙？
这不是“有空隙”，而是 img 默认是 inline 元素，会响应空白符（换行、缩进）产生间隙。即使写了 float: left，HTML 里换行仍会被渲染成约 4px 的空白。
- 解决办法不是调
margin去“抵消”，而是先消灭空白来源 - 推荐：把
img父容器设为font-size: 0，再给img单独设font-size（如果需要文字） - 或者直接删 HTML 中
img标签之间的所有换行和空格（不现实，可读性差）
float: left + margin 的典型错误写法
很多人给每个 img 加 margin-right: 10px，结果最后一张图也多出右边距，破坏布局边界。
- 正确做法是只给「非末尾」的图片加右 margin，可用
:not(:last-child) - 或改用父容器
padding-right+ 子项margin-right: 0来留边 - 更稳妥：用
margin-left给除第一张外的所有图加间距（即:nth-child(n+2)）
现代替代方案比 float 更可靠
float 本意是文字环绕，强行用于布局容易触发 BFC、清除浮动等问题，尤其在响应式场景下难维护。
- 首选
display: flex：div.gallery { display: flex; gap: 10px; flex-wrap: wrap; }——
gap自动跳过末尾，且支持响应式折行 - 次选
display: inline-block+font-size: 0父容器，但需手动处理垂直对齐（vertical-align: top） - 若必须兼容 IE8–9，才考虑
float，此时务必加.gallery:after清除浮动
清除浮动那行 :after 代码怎么写才不漏？
只写 content: "" 不够，缺少关键样式会导致清除失效。
立即学习“前端免费学习笔记（深入）”；
- 完整写法：
.gallery:after { content: ""; display: table; clear: both; } -
display: table触发块格式化上下文（BFC），比block更稳妥 - 别用
overflow: hidden代替，它可能意外裁剪position: absolute子元素 - 如果父容器已有
height或border，清除浮动可能被忽略——优先检查是否已形成 BFC
实际项目里，float 布局的脆弱性往往在加了 hover 动画、动态插入图片或适配移动端时突然暴露。与其反复调试 margin 和清除方式，不如一开始就用 flex。