在传统的网页布局中，float属性曾经是实现多列排列的主要手段。尽管现在更推荐用flexbox或grid，但在维护老项目或书写兼容性样式时，仍然经常需要面对浮动元素之间的距离控制问题。浮动元素脱离普通文档流后，它们之间的间距表现和常规块级元素有明显差异，如果不清楚底层机制，很容易出现间距过大、最后一列换行或者左右不对齐的情况。
浮动元素间距的基本规则
当一个元素被设置为float: left或float: right之后，它会向左或向右移动，直到碰到包含块的边缘或者另一个浮动元素的边缘。此时，元素之间的可见距离完全由它们自身的margin属性决定。需要注意的是，浮动元素的外边距不会发生垂直方向上的折叠，而在水平方向上，相邻浮动元素的margin是直接相加的。
例如两个float: left的盒子，每个都设置了margin-right: 20px，那么它们视觉上的间隙就是40px，而不是像有些人以为的会合并成20px。这一点和常规流中的块级兄弟元素完全不同，也是很多初学者调不好间距的根源。明确这个规则，我们才能在写样式时准确预估总宽度。
使用margin直接控制间隙
最常见也最直接的做法，就是给每一个浮动子元素加上统一的外边距。比如我们想让三个栏目横向排列，并且彼此之间有20px的间隔，可以这样写：
.box {
float: left;
width: 200px;
margin-right: 20px;
background: #f2f2f2;
}
上面的代码看起来没问题，但实际渲染时，最右侧的元素也会带着20px的右外边距，如果父容器宽度刚好是三个盒子加两个间隙（即200*3+20*2=640px），那么第三个盒子的右margin会导致整体宽度变成660px，从而可能把最后一个盒子挤下去。要解决这个问题，通常有两种思路。
第一种是父容器预留出这个多余margin的空间，比如父容器宽度设为660px，但这样不够灵活。第二种是给最后一个元素单独清除间距，利用伪类或额外类名处理，这属于结构层面的修补，在动态数据时不太方便。
利用负margin修正父容器
为了不让最后一个浮动元素的margin破坏布局，我们可以给包裹浮动元素的父容器设置一个相等的负margin，把多出来的边距抵消掉。这种方法在老式栅格系统里非常普遍。
.row {
margin-right: -20px;
}
.row .box {
float: left;
width: 200px;
margin-right: 20px;
}
这里父容器.row的右侧负外边距把子元素多出的20px拉了回来，这样内部不管有多少个带margin-right的浮动项，最右侧都能和父容器对齐。这种写法的优点是子元素结构统一，不需要判断谁是最后一个；缺点是负数margin在某些嵌套场景下需要小心处理溢出隐藏。
如果父容器设置了overflow: hidden，负margin引起的轻微溢出会被裁掉，不会影响外观。但若是多层浮动嵌套，就需要确认每一层的宽度计算是否闭环，否则可能出现横向滚动条。
结合box-sizing与百分比宽度
另一种在现代浏览器中可用的方式是配合box-sizing: border-box以及百分比宽度，用padding代替margin来制造间隙，从而规避margin叠加问题。
<div class="row">
<div class="col">内容一</div>
<div class="col">内容二</div>
<div class="col">内容三</div>
</div>
.row {
overflow: hidden;
}
.col {
float: left;
width: 33.3333%;
padding-right: 20px;
box-sizing: border-box;
}
.col:last-child {
padding-right: 0;
}
上面例子中，每个.col用右内边距撑开间隙，因为box-sizing让width包含了padding，所以三个33.3333%的列总能放下。最后一个子元素去掉padding-right，就不会有多余右侧空白。这种方式语义清晰，也比负margin更好理解，不过它本质上间距是内部留白，背景色如果设在col上会连间隙一起染色，需要再包一层内容div。
对比来看，margin方案间隙透明、盒子背景互不干扰；padding方案则更容易做等宽分栏。实际项目中可以根据是否需要独立背景来选用。
清除浮动对间距的间接影响
除了直接的margin和padding，浮动带来的父容器高度塌陷也会间接影响后续元素的间距。如果父容器没有清浮动，后面的普通流元素会紧贴浮动元素下方，看起来就像间距错乱。
.clearfix::after {
content: "";
display: block;
clear: both;
}
给浮动父容器加上clearfix类，能保证它正确包裹住内部浮动框，从而使下方内容与浮动区域保持正常流间距。很多人只盯着子元素margin调，却忽略了父级没清浮动导致的整体偏移，这也是排错时的重要一环。
总体说来，控制浮动元素间距的核心在于：认清浮动框水平margin不合并的特性，用负margin或结构修正消除末项多余间隙，并在必要时通过清浮动保障宏观布局稳定。掌握这些，即便不用flex也能把老布局间距做得工整可靠。