1. 目标与设计思路
1.1 选择 float 的原因
在网页布局中，CSS Float 提供了直观的水平排列能力，适合快速构建商品图片墙排布。通过让图片块实现左浮，图片会沿着父容器的左侧自然堆叠，形成可预测的网格效果。
另一个关键点是保持对齐的一致性：使用固定宽度的图片单元，辅以统一的padding 与 margin，可以实现整齐的图文间距。若不清除浮动，后续内容容易错位，因此在容器上应用清除浮动的技术尤为重要。
<div class="gallery"><div class="gallery-item"><img src="path/to/image1.jpg" alt="商品1"/></div><div class="gallery-item"><img src="path/to/image2.jpg" alt="商品2"/></div><!-- 其他图片项 -->
</div>1.2 图像单元与容器的关系
为了实现图片墙排布，必须确保每个图片单元拥有统一的尺寸与内边距，容器宽度决定了每行能容纳多少个项。通过把
在实践中，要关注图片比例、是否需要等比缩放、以及容器的边距设置对最终排布的影响。合理配置后，可以实现自然的边界对齐与视觉一致性。
/* gallery 容器与图片单元示例 */
.gallery { overflow: hidden; } /* 清除浮动，确保容器高度自适应 */
.gallery-item { float: left; width: 240px; padding: 8px; margin: 6px; box-sizing: border-box; }2. 使用 float 实现图片墙的基本结构
2.1 HTML 结构与图片项
要构建商品图片墙，首要步骤是设计清晰的 HTML 结构：一个容器包裹若干图片项，每项包含图片以及可选的文字描述。此结构在使用float 时最为直接，能实现水平层级的自动排列。
图片项的尺寸统一，有助于保持整齐的网格感；同时，给每个项设置相同的 padding 与 margin，可以实现一致的间距与对齐。
<section class="gallery"><div class="gallery-item"><img src="path/to/item1.jpg" alt="商品1"><p class="caption">商品1说明</p></div><div class="gallery-item"><img src="path/to/item2.jpg" alt="商品2"><p class="caption">商品2说明</p></div>
</section>2.2 CSS 基本浮动与尺寸控制
通过为图片单元设定固定宽度，以及合理的 padding 与 margin，可以在不同屏幕宽度下维持稳定的图片墙结构。要点在于确保盒模型以border-box计量，这样 padding 与 border 不会影响项的总体宽度。
此外，float: left 的使用使图片项沿左侧对齐，后续项会自动在下一行开始，从而形成整齐的分行排布。
.gallery { overflow: hidden; } /* 清除浮动，确保容器高度正确 */
.gallery-item { float: left; width: 240px; padding: 8px; margin: 6px; box-sizing: border-box; }
.gallery-item img { width: 100%; height: auto; display: block; }3. 间距控制：Padding 与 Margin 的应用
3.1 Padding 的作用与对齐
Padding 负责图片与边框之间的间距，它直接影响到网格中图片之间的视觉距离。合理的 padding 能使图片不会紧贴边框，同时保留内边的可点击区域。
在实际应用中，尽量将图片的宽高比保持一致，配合 padding 形成均匀的“格子”效果，这有助于实现整齐且对称的图片墙。注意不同设备上的像素密度，必要时可以用相对单位进行缩放。
/* padding 对齐的示例 */
.gallery-item { padding: 10px; width: 240px; box-sizing: border-box; }3.2 Margin 的使用与塌陷控制
Margin 控制图片项之间的外部间距，是实现行间与列间间距的关键。通过统一的 margin，能在不同行之间保持一致的垂直间距。
为避免垂直方向的 margin 叠加（塌陷）导致高度变化，可以在容器上应用 overflow: hidden 或者使用一个清除浮动的技巧来稳定高度。
/* 外部间距示例 */
.gallery-item { margin: 6px; }
.gallery { overflow: hidden; } /* 防止垂直塌陷，保持布局稳定 */4. 清除浮动与自适应宽度
4.1 清除浮动的常用做法
浮动会让父容器一开始不撑开，因此需要对父容器进行清除。最简单的做法是给父容器添加一个清 clearfix 的方案，例如使用伪元素。
另一种做法是让父容器具备overflow属性（如 overflow: hidden），这也能在大多数场景下实现清除浮动的效果。
/* clearfix 方法之一 */
.gallery:after {content: "";display: table;clear: both;
}
/* 通过 overflow 实现清除浮动 */
.gallery { overflow: hidden; }4.2 自适应与响应式调整
为实现不同设备下的自适应效果，可以变更图片单元的宽度和边距，或采用媒体查询对 padding、margin 和 图片宽度 进行动态调整。
在响应式设计中，保持图文一致性的最佳实践是将图片墙的每项宽度设为可缩放的百分比，并结合固定比例的图片以避免拉伸。
@media (max-width: 800px) {.gallery-item { width: 180px; padding: 6px; margin: 6px; }
}5. 实战示例：完整的图片墙代码
5.1 完整 HTML 结构
以下是一个完整的商品图片墙示例，展示了使用 float、padding、margin 与 clearfix 的组合，能够在常见布局中稳定呈现商品图片墙。
<section class="gallery"><div class="gallery-item"><img src="images/item1.jpg" alt="商品1"><p class="caption">商品1说明</p></div><div class="gallery-item"><img src="images/item2.jpg" alt="商品2"><p class="caption">商品2说明</p></div><div class="gallery-item"><img src="images/item3.jpg" alt="商品3"><p class="caption">商品3说明</p></div><!-- 更多图片项 -->
</section>5.2 完整 CSS 配置
下面的 CSS 片段给出一个可直接使用的图片墙模板，核心点在于统一的宽度、padding、margin 与 float 左浮的组合。
.gallery {overflow: hidden; /* 清除浮动，保持容器高度 */
}
.gallery-item {float: left;width: 240px;padding: 8px;margin: 6px;box-sizing: border-box; /* 让 padding 不影响总宽度 */
}
.gallery-item img {width: 100%;height: auto;display: block;
}
.caption {font-size: 14px;margin-top: 6px;text-align: center;
}