使用float可实现图片并排排列，通过float:left或right使图片脱离文档流并靠向指定方向，结合width和margin控制布局，每行显示多图并自动换行；需用overflow:hidden或clear:both清除浮动避免父容器高度塌陷；配合媒体查询实现响应式，在小屏幕下改为堆叠显示以提升可读性。
使用CSS浮动（float）可以让图片并排排列，常用于图文混排或图片墙布局。虽然现代布局更多采用Flexbox或Grid，但理解浮动对兼容旧项目仍有价值。
基本浮动原理
将图片设置为浮动元素后，它会脱离正常文档流，向左或向右移动，直到碰到父容器边缘或其他浮动元素。
- 使用 float: left; 让图片依次靠左排列
- 使用 float: right; 让图片靠右排列
- 多个浮动图片会在同一行内依次排列，直到空间不足自动换行
实现多图横向排列
给所有图片设置相同的浮动方向，并控制宽度防止溢出。
img {float: left;
width: 30%;
margin: 1.5%;
}
.container {
overflow: hidden; /* 清除浮动影响 */
}
上面代码让每行最多显示三张图，margin提供间距，overflow隐藏清除浮动带来的高度塌陷。
立即学习“前端免费学习笔记（深入）”；
wordpress主题：格子商铺主题
下载
这是易秀购主题网转载的一款原创来至web主题公园的一款wordpress cms主题，非常适合做图片展示，或婚纱摄影类wordpress主题，采用了大气的网格化无缝设计，使列表以格子铺的方式排列，鼠标悬停的可以出现文章的简介。网站上方可以书写自己的广告语，图片也是可以替换掉的，图片会随着鼠标的移动而轻移，并且在鼠标滚动的时候，下面的模块会直接遮盖这个区域，这款wordpress cms主题视觉效果
处理浮动后的布局问题
浮动会导致父容器无法正确包裹内容，需手动清除浮动。
- 给父容器添加 overflow: hidden;
- 在最后一个浮动元素后加一个清除元素：::after { content: ""; display: block; clear: both; }
响应式调整（可选）
结合媒体查询，在小屏幕上让图片堆叠显示更合理。
@media (max-width: 768px) {img {
width: 45%;
}
}
@media (max-width: 480px) {
img {
width: 100%;
float: none;
}
}
小屏下取消浮动，让图片垂直堆叠，提升可读性。
基本上就这些，浮动实现简单但需注意清理和响应式适配。
