浮动元素不参与margin合并，因其脱离文档流、不属同一bfc；所谓“失效”实为参照系改变——margin作用于包含块边缘或相邻浮动元素，而非普通流中邻居。
浮动元素根本不参与 margin 合并
这不是“失效”，而是规范行为：float 让元素脱离普通文档流，不再属于当前块级格式化上下文（BFC）中的“普通块级盒”。而 margin 合并只发生在同一 BFC 内的相邻普通块级元素之间。所以：
-
float元素的margin-top不会和上面兄弟元素合并 -
float元素的margin-bottom不会和下面兄弟元素合并 -
float元素和父容器之间也不存在垂直 margin 合并
你看到的“间距不对”，往往是因为父容器塌陷、后续非浮动元素没被推下去，而不是 margin 被合并掉了。
真正出问题的是父容器和非浮动兄弟元素
浮动本身不合并 margin，但它会让父容器高度塌陷，导致子元素的 margin-bottom 失去作用对象；同时，它又把后续非浮动兄弟元素“拉上来”，让它们的 margin-top 和更上层元素发生意外合并。
- 两个
float: left的div并排时，右边那个的margin-left看似无效——其实是它在浮动上下文中作用于包含块边缘，而非左边那个元素 - 浮动元素后紧跟一个
p，p的margin-top会直接和再上一层兄弟元素合并，跳过浮动项 - 用开发者工具检查父容器的
height，若为0或远小于预期，就是塌陷+margin “消失”的典型信号
为什么 overflow: hidden 像是修好了 margin？
overflow: hidden 并不是修复了浮动元素自身的 margin，而是触发了 BFC，让父容器重新包裹浮动子项、获得真实高度，从而让子元素的 margin-bottom 有机会影响父容器尺寸，也让后续非浮动兄弟有了明确的“上边界”可参考。
- 它同时解决了两个问题：高度塌陷 + margin 外溢合并
- 但副作用明显：
overflow: hidden可能裁剪position: absolute子元素、下拉菜单或阴影 -
overflow: auto可能多出滚动条，overflow: visible则完全无效
现代项目里该用什么替代 float + margin？
别在浮动上下文里硬调 margin。兼容性允许就直接换布局模型：
- 要居中或等距排列：用
display: flex+justify-content或gap - 要防塌陷又阻断 margin 合并：用
display: flow-root（Chrome 64+/Firefox 58+/Safari 15.4+） - 纯文字/图标小部件：改用
display: inline-block+text-align: center，注意处理空格 - 切记：保留
float又加display: flex，等于两套布局逻辑打架，结果不可控
最易被忽略的一点：浮动元素的 margin 依然生效，只是参照系变了——它不再推邻居，而是推包含块边缘或相邻浮动元素。你得按这个新逻辑重新算间距，而不是沿用块级流的习惯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
