浮动元素的 margin 不会重叠，因其脱离普通文档流，margin-collapse 规则对其完全失效；其与任何元素的垂直 margin 均独立存在、相加计算，而非折叠。
浮动元素的 margin 不会重叠
浮动元素（float: left 或 float: right）脱离普通文档流，因此它和任何其他元素的垂直 margin 都不会发生重叠。这是最核心的一点——margin-collapse 规则对浮动元素完全不生效。
常见误解是把“视觉上挨得近”当成“margin 重叠了”，其实只是浮动后位置靠近，而各自的 margin 仍独立存在、相加计算：
-
float: left元素的margin-right和右边相邻块级元素的margin-left会相加，不是重叠 - 两个连续
float: left元素之间，若都设了margin-right，间距 = 两者之和 - 浮动元素与父容器之间：父容器的
padding或border才影响贴边距离，margin不参与折叠，也不被子浮动元素“触发”父子重叠
为什么 float + margin 看起来像重叠？
这不是 margin 重叠，而是浮动定位 + 负 margin 的视觉偏移叠加效果。例如：
.a { float: left; width: 100px; margin-right: 20px; }
.b { float: left; width: 100px; margin-left: -15px; }
这里 .b 向左偏移 15px，视觉上盖住 .a 右侧 15px，但两者的 margin 值并未合并——.a 的 margin-right: 20px 仍在，.b 的 margin-left: -15px 是额外位移，浏览器按浮动规则先占位再偏移。
容易踩的坑：
- 误以为
margin-left: -15px会让.b“挤进”.a的margin区域——其实.a的margin对.b完全无约束力，因为.a已脱离流 - 多个浮动元素连用负
margin时，边界计算易错位，尤其在不同浏览器中对margin-top负值处理不一致（旧版 Safari 对float: right+margin-top: -10px可能引发行高塌陷）
浮动元素和非浮动元素之间的 margin 行为
浮动元素和它后面紧跟的**非浮动块级元素**之间，margin 依然不重叠，但布局表现特殊：
- 非浮动元素会“绕流”浮动元素，它的
margin-top从浮动元素底部开始算起（如果浮动元素高度足够），而不是从文档流起点 - 该非浮动元素的
margin-top不会和前面浮动元素的margin-bottom折叠——因为浮动元素是流外元素，不参与块格式化上下文（BFC）内的 margin 计算 - 若想让非浮动元素严格紧贴浮动元素底部，不能靠
margin调整，而应考虑clear或包裹容器触发 BFC
真正要警惕的 margin 重叠场景
别在浮动上下文中找 margin-collapse，它根本不存在。真正会重叠的，只发生在以下情况：
- 两个**普通块级元素**（都未
float、未position: absolute/fixed、未触发 BFC）垂直相邻时的margin-top/margin-bottom - 父容器与第一个/最后一个子元素之间，当父容器没有
border、padding、overflow等隔断条件时 - 空块元素自身上下
margin合并（如<div style="margin: 20px 0;"></div>）
只要出现疑似“浮动元素 margin 被吃掉”的现象，基本可以断定是清除浮动逻辑干扰、BFC 截断或 CSS 优先级覆盖，而不是 margin 重叠本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
