浮动元素不参与margin合并，因其脱离文档流、不满足bfc内流内块级盒前提；但其旁的正常流元素间仍会按dom顺序合并外边距。
浮动元素完全不参与 margin 合并
这是最核心的判断：float: left 或 float: right 的元素，**不会与任何其他元素发生垂直外边距合并**。它脱离了普通文档流，也就不再满足 margin collapse 的前提条件——“同属一个块级格式化上下文（BFC）且为流内块级盒”。所以你给浮动元素设 margin-top: 20px，它的上外边距就是实打实的 20px，不会和前面兄弟元素的 margin-bottom 合并，也不会“顶穿”父容器。
浮动元素周围正常流元素之间仍会合并
注意边界：浮动元素自己不合并，但它旁边的正常流元素之间照常合并。比如：
<div class="normal">A</div> <div class="float">B</div> <div class="normal">C</div>
其中 A 和 C 都是普通块级元素、无浮动，即使中间夹着一个 float 元素 B，只要它们在文档流中仍是垂直相邻（即 A 的 bottom margin 与 C 的 top margin 在视觉上“接触”），就依然会合并。浏览器只看盒模型关系，不看视觉位置。
- 合并是否发生，取决于 DOM 顺序和流内位置，不是渲染后像素距离
- 浮动元素可能造成后续正常流元素“绕行”，但绕行后的第一个块级兄弟，仍与其前一个流内块级元素构成相邻关系
- 若想彻底阻断 A 与 C 的合并，需在 A 或 C 上触发 BFC（如
display: flow-root），或加border/padding
浮动 + 父容器塌陷时，父子 margin 合并失效
当子元素浮动，父容器因没有高度而塌陷时，子元素的 margin-top 不再与父容器合并——因为此时子元素已不在父容器的流内子级范畴。但这也带来新问题：父容器高度为 0，无法包裹内容。
- 这不是“解决”了 margin 合并，而是“绕过了”它；真正的布局需求（如让父容器包含浮动子项）仍需清除浮动（
clear）或用display: flow-root等现代方式重建 BFC - 别误以为“只要 float 就万事大吉”：浮动本身会破坏文档流，影响后续元素定位，现在应优先用
display: flex或display: grid替代传统浮动布局 - 若必须用浮动，且需控制父容器顶部间距，请直接给父容器设
padding-top，而非依赖子元素的margin-top
为什么 overflow: hidden 能“顺便”阻止合并？
因为 overflow: hidden（非 visible）会让父容器创建新的 BFC，从而隔断父子间的 margin 接触。但这和浮动无关——浮动元素自身不合并，是因为它已是流外元素；而 overflow: hidden 是让父容器变成 BFC，从而让其内部的正常流子元素无法再与父边界合并。
- 两者机制不同：一个是元素脱离流（
float），一个是容器隔离上下文（overflow） - 实际项目中，看到有人给父容器加
overflow: hidden来“防顶穿”，其实是利用了 BFC，不是靠浮动 - 现代推荐用
display: flow-root替代overflow: hidden，避免意外裁剪阴影或弹层
display: flex 或 display: grid 容器，它们天然规避 margin 合并，且无需处理浮动副作用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
