使用CSS的float属性配合margin外边距，是最早也最通用的实现图片缩略图网格排列的方式。通过将每个缩略图元素设为左浮动，并统一设置宽高与间距，浏览器会自动从左到右排列并在满行后换行，从而形成规整的网格布局。
一、基本HTML结构
我们先准备一组图片缩略图的容器，每个缩略图用一个带类的元素包裹图片：
<div class="gallery"> <div class="thumb"><img src="https://ipipp.com/img1.jpg" alt="图1"></div> <div class="thumb"><img src="https://ipipp.com/img2.jpg" alt="图2"></div> <div class="thumb"><img src="https://ipipp.com/img3.jpg" alt="图3"></div> <div class="thumb"><img src="https://ipipp.com/img4.jpg" alt="图4"></div> <div class="thumb"><img src="https://ipipp.com/img5.jpg" alt="图5"></div> <div class="thumb"><img src="https://ipipp.com/img6.jpg" alt="图6"></div> </div>
二、CSS浮动与margin设置
核心思路是为.thumb设置float: left，并给定固定宽度以及左右下方向的margin，用来形成网格间隙。同时父容器使用overflow: hidden清除浮动影响。
.gallery {
width: 660px;
overflow: hidden; /* 清除浮动 */
}
.thumb {
float: left; /* 关键：左浮动排列 */
width: 200px;
height: 150px;
margin: 0 10px 10px 0; /* 右和下留间距 */
box-sizing: border-box;
}
.thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
1. float的作用
当元素设置float: left后，它会脱离普通文档流并向左侧停靠，后续浮动元素紧跟其后，因此多个缩略图自然排成一行。父容器宽度不足时，多余元素落到下一行，实现换行。
2. margin的网格间隙处理
如果只使用float，缩略图会紧贴在一起。通过margin-right和margin-bottom可以统一留出空隙。注意最后一个右侧元素也会带右margin，若需严格对齐右边界，可用父容器负margin或:nth-child规避。
三、避免边缘重叠的小技巧
有时希望每行三个，且右侧不留多余margin，可以写成：
.thumb {
float: left;
width: 200px;
height: 150px;
margin: 0 10px 10px 0;
}
/* 每行第三个去掉右间距 */
.thumb:nth-child(3n) {
margin-right: 0;
}
四、对比与注意事项
| 方式 | 优点 | 缺点 |
|---|---|---|
| float + margin | 兼容旧浏览器，逻辑简单 | 需手动清除浮动，响应式稍麻烦 |
| flex布局 | 对齐方便，不用清浮动 | 老旧浏览器不支持 |
使用float实现缩略图网格时，务必给父级加上清除浮动样式，否则父容器高度会塌陷。现代项目也可优先考虑flex，但理解float结合margin的用法仍十分必要。
总结：设置图片缩略图排列，只需让缩略图元素float:left，用固定宽高与margin控制间隔，父容器清除浮动即可完成网格效果。