浮动元素的 margin 不参与父元素 margin 合并，因其脱离文档流成为流外块级盒，仅流内块级盒才参与垂直 margin 合并；其 margin 作用于包含块边缘或相邻浮动元素。
浮动元素的 margin 不会与父元素发生合并，根本原因不是“被禁用”或“失效”，而是它压根没资格参与合并——float 让元素变成流外块级盒（out-of-flow block box），而 CSS 规范明确规定：只有流内块级盒（in-flow block-level boxes）才参与垂直方向的 margin 合并。
浮动元素已脱离父容器的块格式化上下文（BFC）
一旦设置 float: left 或 float: right，该元素就不再属于父容器的常规文档流。它不占据父容器的块级空间，也不再是父容器 BFC 中的“子级块盒”。因此：
- 父容器的
margin-top/margin-bottom无法与浮动子元素的对应margin接触——它们不在同一个合并链上 - 浮动子元素的
margin-top实际作用对象是其包含块（containing block）的上边缘，通常是父容器的内容区顶部；margin-bottom则可能推包含块底部，或与相邻浮动元素对齐 - 你看到的“父容器没被撑开”，不是因为 margin 被合并了，而是因为浮动子项根本没参与高度计算
为什么父容器看起来“吃掉”了子元素的 margin-top？
这不是浮动导致的，而是父容器自身未形成 BFC + 高度塌陷时，**非浮动子元素**的 margin-top 穿透上来，和父容器甚至 body 的 margin 合并所致。常见误判场景：
- 父容器里混有浮动和非浮动子元素（比如一个
float: left的图片 + 一段普通p） - 那个
p的margin-top仍会尝试与父容器上边界合并——但此时父容器因浮动塌陷、无高度、无 border/padding，合并就直接“溢出”到外部 - 开发者工具里看到父容器 computed
margin-top是 20px，但实际位置下移了，说明合并发生了；而浮动子元素的margin值在 computed 中始终存在且未被覆盖
如何验证浮动元素的 margin 是否真正生效？
别看后续文字是否被推开，要看它对包含块的实际影响：
- 给父容器加
border: 1px solid red：浮动子元素的margin-top会从 border 内侧开始起算，你能看到空白间隙 - 给父容器设
overflow: hidden或display: flow-root：父容器高度恢复正常，此时浮动子元素的margin-bottom就能撑开父容器底部空间 - 用两个同向浮动元素并排：
margin-right在它们之间生效（右浮动元素的margin-left也一样），这是最直观的验证方式
最容易被忽略的是：浮动元素的 margin 一直都在，只是参照系变了——它不推邻居，只推包含块边缘或相邻浮动元素。如果你在调试时还在用“兄弟元素间距”的直觉去判断，就已经偏离了它的实际布局逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
