浮动元素的 margin 并非不合并，而是因脱离文档流不参与 bfc 内的 margin 合并；父容器塌陷导致 margin 悬空不可见；现代布局应优先使用 flex/gap 或 grid/gap 替代 float + margin。
浮动元素的 margin 真的不合并吗？
不是“不合并”，而是根本没机会合并——因为浮动元素已脱离普通文档流，不再参与块级格式化上下文（BFC）内的 margin 合并规则。浏览器只对处于同一 BFC 中、相邻的、正常流内的块级元素执行垂直 margin 合并。一旦 float: left 或 float: right，它就自动退出这场“叠罗汉”游戏。
常见错误现象：
- 两个左浮动的
div各设margin-right: 20px，结果间距只有 20px，误以为“合并了”；其实是右侧 margin 作用在下一个浮动元素的左侧，视觉上就是单边间隔 - 浮动元素后面紧跟一个普通
p，给p设margin-top: 30px，却完全没反应——因为p和浮动元素不在同一层流里，无法触发合并，也难建立参照关系
为什么父容器高度塌陷会让 margin “消失”？
浮动子项脱离文档流后，父容器若无其他非浮动内容，其高度会坍缩为 0。此时你给子项设置的 margin-bottom 仍在，但父容器没撑开，下边距自然悬空不可见；同理，margin-top 若设在第一个浮动子项上，也可能被父容器“吞掉”，看起来像失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
overflow: hidden（或auto、scroll），触发 BFC，让容器重新包含浮动区域 - 避免用
height硬写高度来“撑开”，它不响应内容变化，且和 margin 行为无关 - 慎用
display: inline-block模拟包含，可能引入基线对齐偏移，尤其混排文字时
横向间距该用哪边 margin？
并排浮动时，控制间距要统一方向，否则容易混乱。比如全用 float: left，就只设 margin-right；全用 float: right，就只设 margin-left。混用左右 margin 不仅语义不清，还可能因换行导致间距错位。
使用场景与陷阱：
- IE6/7 存在著名的“3px bug”：左浮动元素右侧会多出约 3px 间隙，常被误判为
margin设置错误 - 反向浮动（一个
left、一个right）时，它们之间的 margin 仍独立存在，但容器宽度稍有不足就会换行，间距表现不可控 - 现代项目中，
gap配合display: flex可直接替代这种手工 margin 控制，语义清晰、响应友好
现在还该用 float + margin 布局吗？
绝大多数情况下不该。浮动本就不是为布局设计的，而是为文字环绕服务的；它和 margin 的交互逻辑隐晦，尤其嵌套、响应式或动态内容场景下极易失控。
更现实的选择：
- 用
display: flex+gap替代并排浮动，间距明确、无塌陷、无合并干扰 - 用
display: grid处理二维布局，gap同样生效，且支持跨行/跨列对齐 - 若必须兼容 IE9 及以下，才考虑
float+ 清除浮动（如.clearfix::after），但务必搭配overflow: hidden或 BFC 触发防止塌陷
真正容易被忽略的点是：问题往往不出在 margin 写错了，而出在“浮动之后，谁还在看这个 margin”。得先确认它有没有容器可依附、有没有流可参与、有没有参照物可作用——否则再调数值也没用。
