使用CSS float可实现商品图片墙横向排列，通过设置固定宽度、float: left及margin实现间距，配合padding和box-sizing确保布局整齐，父容器用clearfix清除浮动防止塌陷，结合媒体查询在不同屏幕下调整宽度与边距，实现响应式一行四列、两列或单列布局。
用CSS的float属性可以实现商品图片墙的排列，配合padding和margin能更好控制间距与布局。虽然现代布局多用Flexbox或Grid，但在一些老项目或简单场景中，float仍是可行方案。
使用float实现图片横向排列
将每个商品图片项设置为左浮动，它们会依次从左到右排列，直到容器宽度不足时自动换行。
关键点是给每个商品项设置固定宽度，并使用float: left：
- 给商品容器（如li或div）设置固定宽度，例如22%
- 设置float: left，让元素横向排列
- 添加margin实现项之间的间隔
- 父容器清除浮动，防止布局塌陷
示例代码：
立即学习“前端免费学习笔记（深入）”；
.product-item {
width: 22%;
float: left;
margin: 1.5%;
padding: 10px;
box-sizing: border-box;
}
.product-img {
width: 100%;
height: auto;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
用padding控制内边距与对齐
padding用于在商品框内部留出空间，避免文字或图片紧贴边框。设置box-sizing: border-box后，padding会被包含在元素总宽内，不会破坏布局计算。
- padding: 10px 可使图片与容器边缘保持距离
- 上下padding可统一高度感，视觉更整齐
- 结合border-radius可做出卡片效果
用margin控制外边距与换行
margin决定商品项之间的空白区域。合理设置margin能让图片墙不拥挤。
- 左右margin制造水平间距
- 上下margin制造垂直行距
- 注意总宽度：4个22%宽度 + 4个3% margin ≈ 100%，刚好一行四列
- margin过大可能导致某行只能放三个，出现空白错位
响应式调整与清除浮动
在小屏幕上，可借助媒体查询调整商品项宽度，实现响应式排列。
- 屏幕窄时改为50%宽度，一行两个
- 超小屏设为100%，一列显示
- 父容器加clearfix类防止高度塌陷
示例响应式规则：
@media (max-width: 768px) {
.product-item {
width: 46%;
margin: 2%;
}
}
@media (max-width: 480px) {
.product-item {
width: 90%;
margin: 5%;
}
}
基本上就这些。float虽旧，但理解它有助于维护老项目，也能加深对文档流的理解。布局核心在于控制宽、浮动、间距三者平衡。不复杂但容易忽略细节。
