结论是：唯一稳定方案是父容器设 margin-left 负值抵消首项左空隙，子元素统一设 margin-right 正值并:last-child 清零；单独给后续浮动元素设 margin-left 负值会导致持续左偏、重叠错位，因其向左“钻”而非推前项。
直接说结论：用 float + margin-right 正值控制间距，再用父容器 margin-left 负值抵消首项左空隙，是唯一能稳定实现“多个浮动 div 等间距横向排列”的负外边距方案。
为什么不能对每个浮动元素单独设 margin-left: -Xpx
常见错误是给第二个及之后的浮动 div 都加 margin-left: -20px——这会导致所有后续元素持续左偏移，越往后重叠越严重，最终挤成一团。原因在于：浮动元素脱离文档流后，margin-left 负值会让它向左“钻”进前一个元素的视觉空间，而不是“把前一个推远”。结果不是等距，而是错位叠加。
真正起作用的是：margin-right（正值）定义每个元素右侧预留空间，再配合父容器整体左移来对齐起点。
- 浮动元素自身不设负
margin-left，只设统一的margin-right: 20px - 父容器设
margin-left: -20px，抵消第一个子元素左侧多出的 20px 空隙 - 最后一个子元素需额外清除右外边距（如用
:last-child { margin-right: 0; }），否则右侧多出空白
float + margin-right 的实际写法与关键细节
假设要排 4 个宽 120px、高 80px 的浮动块，水平等距 20px：
立即学习“前端免费学习笔记（深入）”；
.container {
overflow: hidden; /* 清除浮动塌陷 */
margin-left: -20px; /* 抵消首项左侧空隙 */
}
.container > div {
float: left;
width: 120px;
height: 80px;
margin-right: 20px; /* 每个右边留 20px 间距 */
}
.container > div:last-child {
margin-right: 0; /* 最后一项不留右空隙 */
}注意：margin-right: 20px 是施加在每个子元素上的，不是负值；负值只出现在父容器的 margin-left 上。这是整个布局能对齐的锚点。
- 若不设
overflow: hidden，父容器高度会塌为 0，布局消失 - 若子元素没设明确
width，浮动后宽度可能收缩或撑满，导致margin-right失效 - 移动端需额外处理：小屏下建议改用
flex，因为浮动+负外边距在缩放时易错行
和 flex 方案对比：什么时候必须用负外边距？
纯现代项目优先用 display: flex + gap，简单可靠。但负外边距方案仍有不可替代场景：
- 需要兼容 IE9–IE10（
flex不支持或需旧语法） - 已有大量浮动结构的老系统，临时加等距需求，改
flex成本过高 - 需与绝对定位/其他非标准流元素混合排版，
flex容器内难以嵌套复杂定位逻辑
性能上无明显差异，但可维护性差很多：一旦增删元素，:last-child 规则、父级负 margin 值都要手动调整，而 flex + gap 是声明式自动计算。
容易被忽略的兼容性陷阱
IE8 及更早版本对负外边距的支持极不稳定，尤其当浮动元素含 inline-block 子项或字体渲染异常时，margin-right 可能被忽略或加倍。测试时务必用真实 IE8 环境（不是 IE11 的兼容模式）。
- IE8 中，若父容器
width未显式设定，margin-left: -20px可能被完全忽略 - 某些安卓 4.x WebView 对
margin-right在浮动下的解析存在 1px 偏差，需用transform: translateX(-1px)微调 - 所有浏览器中，若浮动元素含
box-sizing: border-box且设置了border，负外边距的视觉偏移量会受边框影响，建议统一用box-sizing: content-box或提前减去边框宽度
真正难的从来不是怎么写那几行 CSS，而是判断「这个老系统里，到底有没有比负外边距更轻量、更稳的替代路径」——有时候加一行 display: table-cell 比调试三小时浮动偏移更省事。
