浮动元素外边距折叠导致间距异常，因脱离文档流使margin计算失效；应避免直接设margin，改用padding、BFC包裹或Flex/Grid布局，配合gap属性和box-sizing统一控制。
浮动元素外边距折叠导致间距异常
多个 float: left 元素并排时，如果给它们设置 margin-right，最后一项也会多出一份右边距，视觉上右侧留白变大；更隐蔽的是，当浮动元素高度不一致时，后续元素可能被“卡住”，造成垂直间距错乱——这本质是浮动脱离文档流后，margin 与父容器、兄弟元素之间不再按常规块级规则计算，部分 margin 会失效或叠加。
- 避免给浮动元素设
margin控制水平间距，改用padding或容器内margin隔离 - 若必须用
margin，统一只设margin-right，再用:nth-child(n):last-child { margin-right: 0; }清除末项 - 父容器需触发 BFC（如加
overflow: hidden或display: flow-root），否则无法包裹浮动子元素，导致后续内容塌陷、间距参考系错乱
替代 float 的现代布局方案更可控
用 float 做多栏布局本就不是它的设计目标，强行调整 margin 容易陷入“修一个 bug 冒两个”的循环。CSS Grid 和 Flexbox 天然支持间距控制，且无文档流脱离问题。
-
display: flex下，用gap属性直接定义元素间空隙，兼容性已覆盖 Chrome 84+/Firefox 63+/Safari 14.1+ - Grid 中
grid-gap（或gap）同样生效，且可分别设行列间距：gap: 12px 8px - 若需兼容 IE11，可用
flex+margin组合，但必须为第一项加margin-left: 0，其余项设margin-left，避免首项空白
清除浮动后仍间距不均？检查盒模型和字体度量
即使清除了浮动（如用 ::after { content: ""; display: table; clear: both; }），元素实际渲染宽度可能因 box-sizing 或内联文本而偏移：默认 box-sizing: content-box 时，width + padding + border 超出设定值；行内元素（如 span 包裹文字）受 line-height 和字体下降部（descender）影响，底部对齐线不一致也会让垂直间距看起来参差。
- 统一设
*, *::before, *::after { box-sizing: border-box; } - 浮动容器内所有子元素显式设
vertical-align: top（针对 inline/inline-block）或display: block - 检查是否混用了
em/rem和像素值，不同字号下相对单位会放大误差
.container {
display: flex;
gap: 16px;
}
.item {
flex: 1;
min-width: 0; /* 防止内容溢出挤压间距 */
}浮动布局的间距问题，核心不在 margin 数值本身，而在浮动破坏了常规的盒模型参与规则。真正稳定的解法，是让元素回到文档流中参与计算——要么用 flex/grid 替代，要么确保浮动父容器完整包裹、子元素尺寸行为可预测。那些靠反复调 margin 像素值“凑”出来的整齐，往往在换字体、缩放页面或换设备时立刻失效。
立即学习“前端免费学习笔记（深入）”；
