使用float实现多行卡片布局需设置float:left、控制宽度与margin总和小于100%、用overflow:hidden清除浮动，配合box-sizing:border-box确保尺寸精确，通过负边距或百分比margin均匀分布间距，并结合媒体查询实现响应式适配。
多行浮动卡片布局在网页设计中很常见，比如产品展示页、图片墙等。虽然现代布局更推荐使用 Flexbox 或 Grid，但在一些兼容性要求较高的项目中，Float 仍然是可行方案。下面介绍如何用 CSS 的 float 实现多行卡片布局，并精准控制间距。
基本HTML结构
每个卡片放在一个容器内，结构清晰有助于后续样式控制：
卡片1卡片2卡片3卡片4卡片5卡片6
使用float实现横向排列
通过设置 float: left 让卡片向左浮动，形成行内排列。关键点是控制宽度和避免换行错乱。
CSS 示例：
立即学习“前端免费学习笔记（深入）”；
.card-container {
width: 100%;
overflow: hidden; /* 清除浮动影响 */
}
.card {
width: 30%; / 每行最多放3张卡（留出间隙） /
margin: 1.5%;
float: left;
background-color: #f0f0f0;
padding: 20px;
box-sizing: border-box;
text-align: center;
border-radius: 8px;
}
- 设置 width + 左右margin 总和小于 100%，确保每行能放下指定数量的卡片
- box-sizing: border-box 确保 padding 不影响实际宽度
- overflow: hidden 在容器上清除子元素浮动带来的高度塌陷
控制间距的技巧
浮动布局中，卡片之间的间距常因 margin 分摊不均导致边缘贴边或不对称。以下是两种常用处理方式：
- 使用固定百分比 margin（如 1.5%），配合计算后的 width，使左右留白均匀
- 若想实现等间距（包括左右贴边对齐），可改用“负边距”技巧：
.card-container {
margin: 0 -10px; /* 外层负边距抵消内层多余间隙 */
}
.card {
width: 33.333%;
float: left;
padding: 20px;
box-sizing: border-box;
text-align: center;
}
.card-inner {
margin: 10px;
background: #f0f0f0;
border-radius: 8px;
padding: 20px;
}
这种结构将 margin 移到内部元素，外层用负边距“拉伸”视觉边界，实现更规整的间隙对齐。
响应式适配建议
为了让布局在不同屏幕下保持合理行数，可以结合媒体查询调整卡片宽度：
@media (max-width: 768px) {
.card {
width: 46%;
margin: 2%;
}
}
@media (max-width: 480px) {
.card {
width: 100%;
margin-bottom: 10px;
}
}
小屏下改为单列显示，提升可读性。
基本上就这些。用 float 做多行卡片布局不复杂，关键是算好宽度与 margin 的关系，加上清除浮动和响应式处理，就能稳定运行。虽然现在有更优方案，但理解 float 布局仍有价值。
