使用float实现商品卡片布局，通过设置.product-card向左浮动并控制宽度与边距，使多张卡片横向排列且支持响应式调整，配合overflow:hidden避免父容器塌陷，适用于兼容旧浏览器的静态展示场景。
要实现商品卡片的浮动布局，可以使用 CSS 的 float 属性来让多个商品卡片在一行内从左到右排列，当空间不足时自动换行。虽然现代开发更推荐使用 Flexbox 或 Grid 布局，但 float 仍可用于兼容旧浏览器或简单场景。
1. HTML 结构设计
每个商品卡片通常包含图片、标题、价格等信息，用一个容器包裹：
商品名称
¥99.00
商品名称
¥129.00
2. 使用 float 实现横向排列
设置 .product-card 向左浮动，并控制宽度，使多个卡片并排显示：
.product-container {overflow: hidden; /* 触发 BFC，防止父容器塌陷 */
}
.product-card {
width: 22%; /* 每行最多显示 4 张卡片（留出边距空间） */
float: left;
margin: 1% 1.5%; /* 外边距，上下 1%，左右 1.5% */
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
text-align: center;
}
.product-card img {
width: 100%;
height: auto;
border-radius: 6px;
}
3. 响应式适配（可选）
通过媒体查询，在小屏幕上减少每行卡片数量：
HMCSS通用企业网站系统1.0
下载
HMCSS是由河马工作室全新开发的通用的企业网站系统，是PHP+MYSQL的架构，采用DIV+CSS的方式进行网页布局，网站的功能包括有：企业简介，图片展示幻灯，产品图片滚动，企业荣誉，实力展示，产品分类及展示，网上招聘，在线留言，联系我们，在线地图等内容，另外还带有完整的管理后台，如网站SEO优化关键词等都可以自由设定。 HMCSS目前发布的是1.0版本，就是上述的这些内容。后面我们还要加上产品
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {.product-card {
width: 46%; /* 每行显示两张 */
}
}
@media (max-width: 480px) {
.product-card {
width: 100%; /* 单列显示 */
}
}
4. 清除浮动影响
由于浮动元素脱离文档流，父容器可能高度塌陷。使用 overflow: hidden 可解决（如上所示），也可以添加清除元素：
基本上就这些。float 布局简单有效，适合静态商品展示页。注意控制宽度和 margin 避免换行错乱，配合响应式规则提升移动端体验。不复杂但容易忽略细节。
