浮动结合媒体查询可实现响应式图片墙，通过设置 .img-item 不同屏幕下的宽度实现四列到单列布局的自适应变化，使用容器 overflow: hidden 及伪元素清除浮动，配合百分比宽度与弹性间距保证兼容性与视觉平衡。
浮动（float）结合媒体查询（media queries）能有效实现响应式图片墙，尤其在不使用Flexbox或Grid的老项目中仍有实用价值。核心思路是让图片容器通过 float 自动换行排列，并借助 media queries 在不同屏幕尺寸下调整列宽与布局结构。
使用 float 创建基础图片墙
将每张图片包裹在容器中，设置 float: left 并控制宽度百分比，使它们在一行内排列，超出则自动换行。
.container {
width: 100%;
overflow: hidden; /* 清除浮动影响 */
}
.img-item {
float: left;
width: 25%; /* 默认四列布局 */
padding: 5px;
box-sizing: border-box;
}
.img-item img {
width: 100%;
height: auto;
display: block;
}这样图片会按四列排列，但小屏幕下会变得过窄。需用媒体查询动态调整。
用 media queries 适配不同屏幕
根据设备宽度改变 .img-item 的宽度，从而实现列数变化。例如：
立即学习“前端免费学习笔记（深入）”；
/* 平板：三列 */
@media (max-width: 768px) {
.img-item {
width: 33.33%;
}
}
<p>/<em> 小屏手机：两列 </em>/
@media (max-width: 480px) {
.img-item {
width: 50%;
}
}</p><p>/<em> 超小屏：单列 </em>/
@media (max-width: 320px) {
.img-item {
width: 100%;
}
}随着屏幕缩小，图片自动从四列过渡到三列、两列直至全宽显示，视觉更清晰。
清除浮动与响应式细节
浮动可能导致父容器塌陷，建议为容器添加 overflow: hidden 或使用伪元素清浮。
.container::after {
content: "";
display: table;
clear: both;
}同时注意图片的 max-width: 100% 和 height: auto，防止溢出容器。padding 或 margin 统一用百分比或 rem，保持弹性。
基本上就这些。虽然现代布局多用 Flex 或 Grid，但在兼容旧浏览器时，float + media queries 仍是可靠选择。关键在于合理划分断点，确保各尺寸下视觉平衡。
