使用float实现多列等间距布局可通过负margin与padding配合或text-align:justify方法，但推荐采用flex布局以更简洁高效地实现均匀分布。
实现多列浮动元素等间距布局，关键是既要让元素横向排列，又要均匀分布容器内的空白。虽然传统 float 布局已逐渐被更现代的方法取代，但依然可以通过技巧实现等间距效果。
使用 float + margin 负值与 padding 配合（经典双飞翼思路）
通过给父容器设置左右 padding，子元素用 float 并配合负 margin 来实现视觉上的等间距。
示例：给父容器设置左右内边距，为两侧留出空间；每个浮动子项设置相等的左右 margin，首项和末项通过父容器的 padding 补偿。
.container {
padding: 0 20px; /* 两侧留白 */
overflow: hidden; /* 清除浮动影响 */
}
.item {
float: left;
width: 20%;
margin: 0 2.5% -1px; /* 左右 margin 相等，制造间距 */
background: #eee;
box-sizing: border-box;
}
这样五个元素各占 20%，加上左右 2.5% 的 margin，总宽度刚好 100%。负 margin 可微调对齐问题。
使用 text-align: justify 实现文本对齐式等距
利用文本对齐的 justify 特性，让块级元素像文字一样两端对齐。
立即学习“前端免费学习笔记（深入）”；
- 父容器设置 text-align: justify
- 子元素设为 inline-block 并 float:left 或 display:inline-block
- 在最后一行末尾添加一个宽度 100% 的伪元素撑开对齐
.container {
text-align: justify;
font-size: 0; /* 消除 inline-block 间隙 */
}
.container:after {
content: '';
display: inline-block;
width: 100%;
}
.item {
display: inline-block;
width: 20%;
height: 100px;
background: #ddd;
font-size: 16px;
text-align: center;
}
此方法兼容性好，适合静态数量或单行布局。
推荐：使用 Flexbox 更简洁实现
虽然题目提到“浮动”，但实际开发中 flex 是更优解，能轻松实现等间距且无需清除浮动。
.container {
display: flex;
justify-content: space-between; /* 或 space-around */
}
.item {
flex: 1;
margin: 0 10px;
background: #eee;
}
/* 首尾项贴边时可用 space-between，中间项等距用 space-around */
flex 布局自动分配空间，支持响应式，代码更清晰。
总结建议
若必须使用 float，可通过控制 margin 和 padding 配合 text-align: justify 实现等间距。但强烈建议转向 Flexbox 或 CSS Grid，它们原生支持等间距分布，维护更简单，适配更灵活。基本上就这些。
