浮动盒子的 margin 并非失效，而是因脱离文档流导致与兄弟元素 margin 折叠或视觉错位；正确做法是统一设置同向 margin 并用负 margin 补偿父容器，或改用 flex + gap。
浮动盒子的 margin 为什么经常“失效”
不是 margin 没起作用，而是浮动元素脱离文档流后，相邻块级元素的 margin 折叠或视觉错位导致它看起来没生效。典型表现是：margin-right 或 margin-bottom 在某些方向上完全不占空间，尤其当两个 float: left 盒子并排时，右边盒子的 margin-left 可能被“吞掉”。
根本原因是：浮动元素的外边距不会与父容器或兄弟块级元素的 margin 发生折叠，但它和另一个浮动元素之间，会受“行框（line box）”高度、清除行为、以及是否触发 BFC 的影响。
用 float + margin 实现间距的正确写法
必须确保 margin 应用在「有渲染占位」的方向上，并避开浮动塌陷干扰。最稳妥的方式是统一给所有浮动项加同向 margin，再用负 margin 补偿父容器：
- 给每个浮动盒子设置
margin-right（水平排列）或margin-bottom（垂直排列），而不是只给中间项加 - 父容器设置
margin-right: -Xpx（X 为单个margin-right值），抵消最后一项多余的右间距 - 避免对第一个或最后一个浮动项单独写
:first-child/:last-childmargin 重置——CSS 选择器在浮动布局中容易失效
示例：
.item {
float: left;
width: 200px;
margin-right: 16px; /* 所有项都加 */
}
.container {
margin-right: -16px; /* 抵消末尾多出的 16px */
}
更现代、更少坑的替代方案：flex 替代 float
如果你只是想让几个盒子水平/垂直排列并保持间距，float 已不是首选。Flex 布局天然支持间距控制，且无文档流脱离问题：
-
gap属性直接定义项目间空隙，不依赖 margin，也不受顺序影响 - 无需清除浮动，无父容器高度塌陷风险
- IE10+ 支持
display: flex，若需兼容 IE9 及以下才考虑 float 回退
简单替换：
.container {
display: flex;
gap: 16px; /* 替代所有 margin-right */
}
.item {
flex: 0 0 200px; /* 防止缩放，等价于 float 宽度控制 */
}
IE8–9 中必须用 float 时的兼容处理
老版本 IE 对浮动 margin 的解析更脆弱，尤其是 margin-right 在最后一项上会撑宽父容器甚至换行。此时要主动切断“浮动流”的延续性：
- 给最后一个浮动项加
margin-right: 0，用:nth-child(n)不可靠，改用类名如.item-last - 父容器设
font-size: 0，子项重置font-size，消除 inline-level 元素间的空白符间隙（常被误认为 margin） - 避免在浮动项内使用
display: inline-block，它会放大 IE 下的基线对齐问题，进一步扰乱间距
关键点：老浏览器里，“看起来有间距”不等于“用 margin 实现了间距”，往往是字体、行高、空白符共同作用的结果。
浮动本身已过时，但只要还在维护老项目，就得接受它的脾气——margin 不是不能用，而是得用在它认得清的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
