浮动元素的margin不参与垂直合并，因其脱离文档流成为流外块级盒；它仅作用于包含块边缘或相邻浮动元素，而非后续普通流元素。
浮动元素的margin根本不在重叠规则里
它不是“不重叠”，而是压根没资格参与——float让元素变成流外块级盒（out-of-flow block box），而CSS规范明确规定：只有流内块级盒（in-flow block-level boxes）才参与垂直方向的margin合并。你看到的“间距消失”“文字紧贴底部”，不是margin失效，是后续普通流元素压根没把它当“上一个兄弟”来计算布局。
为什么float:left的div设了margin-bottom却推不动后面的p？
因为那个p在普通流中从父容器顶部开始排布，它的margin-top会和父容器的margin-top（或更上层兄弟）合并，完全跳过浮动项。同时，若父容器未清除浮动，高度塌陷为0，margin-bottom就失去了作用对象——它还在，只是没地方撑开。
- 用开发者工具选中
p，看computed的margin-top是否被“上提”了 - 检查父容器的Computed Height是否为0或远小于预期
- 浮动元素的
margin实际作用对象是包含块边缘或相邻浮动元素，不是后面那个p
overflow:hidden能“修复”但会带来新问题
它确实触发BFC，让父容器重新包裹浮动子项、高度恢复正常，于是margin-bottom终于能撑开空间。但它副作用明显：
-
overflow: hidden会裁剪所有溢出内容：box-shadow、position: absolute下拉菜单、tooltip全被截断 - 若父容器内混有非浮动块级子元素，它们之间仍会发生垂直
margin合并（BFC只隔离内外，不自动隔离内部兄弟） - 旧版Safari中配合
transform可能闪烁
现代项目该用什么替代方案？
别在浮动上下文里硬调margin。兼容性允许就直接换布局模型：
立即学习“前端免费学习笔记（深入）”；
- 并排布局（导航栏、卡片组）：用
display: flex+gap，margin彻底退出历史舞台 - 需要防塌陷又阻断
margin合并：用display: flow-root（Chrome 64+/Firefox 58+/Safari 15.4+），无裁剪、无滚动条、不影响定位 - 纯文字/图标小部件：改用
display: inline-block+text-align: center，注意统一vertical-align: top避免基线错位
最容易被忽略的一点：浮动元素的margin依然完全生效，只是参照系变了——它不再推邻居，而是推包含块边缘或相邻浮动元素。如果你没看到预期效果，大概率是因为你还在用普通流的思维去调试一个已脱离文档流的盒子。
