使用负margin补偿容器并结合float与统一外边距，可实现浮动卡片间距均匀，通过box-sizing和媒体查询优化换行与响应式布局。
要实现浮动卡片之间间距均匀，使用 float 和 margin 结合时，常见的问题是最后一行或换行处的间距不一致。通过合理设置 margin 和父容器的结构，可以有效解决这个问题。
1. 基本HTML结构
假设我们有一组卡片，放在一个容器中：
<div class="card-container"><div class="card">卡片1</div>
<div class="card">卡片2</div>
<div class="card">卡片3</div>
<div class="card">卡片4</div>
<div class="card">卡片5</div>
<div class="card">卡片6</div>
</div>
2. 使用float和margin的基本样式
让每个卡片左浮动，并设置左右外边距，使它们之间保持间距：
.card-container {overflow: hidden; /* 清除浮动 */
}
.card {
width: 30%;
float: left;
margin-left: 5%;
margin-bottom: 20px;
background: #f0f0f0;
text-align: center;
padding: 20px 0;
}
这里设置 margin-left: 5%，但第一张卡片也会有左边距，导致每行第一个卡片与容器左侧间距过大。
立即学习“前端免费学习笔记（深入）”；
3. 解决首项间距问题
给容器设置负边距，抵消第一项多余的 margin：
.card-container {overflow: hidden;
margin-left: -5%; /* 抵消每个卡片的margin-left */
}
.card {
width: 30%;
float: left;
margin-left: 5%;
margin-bottom: 20px;
background: #f0f0f0;
text-align: center;
padding: 20px 0;
}
这样，容器向左“拉”了5%，而每个卡片向右偏移5%，视觉上所有卡片间距就均匀了，包括与容器左侧对齐。
4. 控制换行对齐与响应式调整
为了确保每行卡片数量可控，可以配合百分比宽度和 box-sizing 精确布局：
* {box-sizing: border-box;
}
.card {
width: 23.75%; /* 四等分：(100% - 3*5%) / 4 = 23.75% */
float: left;
margin-left: 5%;
margin-bottom: 20px;
background: #f0f0f0;
text-align: center;
padding: 20px 0;
}
此时每行最多显示4个卡片，间距均匀，换行自然。可通过媒体查询在小屏幕上调整 width 和 margin 以适配手机。
基本上就这些。关键是用负 margin 补偿容器，结合 float 和统一的 margin-left 实现视觉上的等距排列。虽然现代布局多用 Flex 或 Grid，但在兼容老浏览器时，float + margin 仍是可靠方案。
