css浮动可以让块级元素脱离普通文档流并向左侧或右侧移动，直到碰到父容器边缘或另一个浮动元素。利用这一特性，把每张图片放进固定宽度的容器并设为左浮动，就能形成从左到右排列、满行后自动换行的多列图片布局。
基本html结构
我们使用一个外层容器包裹多个图片项，每个图片项使用统一类名便于控制。
<div class="gallery"> <div class="item"><img src="https://ipipp.com/img1.jpg" alt="图1"></div> <div class="item"><img src="https://ipipp.com/img2.jpg" alt="图2"></div> <div class="item"><img src="https://ipipp.com/img3.jpg" alt="图3"></div> <div class="item"><img src="https://ipipp.com/img4.jpg" alt="图4"></div> </div>
css浮动实现多列排列
给图片项设置固定宽度并添加float:left，容器宽度足够时会排成多列。下面以每行显示三列为例，假设总宽度为900px，每项宽度设为300px。
.gallery {
width: 900px;
/* 触发bfc或后续清除浮动均可 */
}
.item {
width: 300px;
float: left;
box-sizing: border-box;
padding: 5px;
}
.item img {
width: 100%;
display: block;
}
清除浮动防止高度塌陷
由于子元素全部浮动，父容器.gallery会高度塌陷。需要在容器末尾清除浮动，常用伪元素方案：
.gallery::after {
content: "";
display: block;
clear: both;
}
响应式多列调整
在不同屏幕下可通过媒体查询改变每项宽度，从而调整列数。例如窄屏下每行两列：
@media (max-width: 600px) {
.gallery { width: 100%; }
.item { width: 50%; }
}
常见问题与处理
- 图片下方间隙：图片设为
display:block可去除行内元素底部空白。 - 列错位：检查每项宽度加内边距是否超出父容器，推荐使用box-sizing。
- 旧版ie浮动双倍边距：给浮动元素加
display:inline修正。
小结
使用css浮动进行多列图片布局只需掌握浮动设置、宽度计算和清除浮动三点。虽然flex布局更现代，但浮动在兼容性要求高的场景依然实用。理解其原理有助于排查老项目中的排版异常。