浮动元素的margin并未失效，而是因脱离文档流不再参与margin合并，仅作用于包含块边缘或相邻浮动元素；所谓“失效”实为父容器塌陷与后续非浮动元素margin意外合并所致。
浮动元素的 margin 本身没有失效，它始终生效——只是作用对象变了。所谓“失效”，其实是你期待它推隔壁元素，但它只推包含块边缘或相邻浮动元素，而你没意识到文档流已断裂。
float 元素不参与 margin 合并的底层原因
标准规定：margin 合并（collapse）只发生在同一块格式化上下文（BFC）内的普通块级盒之间。而 float 元素已脱离普通文档流，不属于该上下文中的“普通块级盒”。因此：
-
float元素的margin-top不会和上方兄弟元素合并 -
float元素的margin-bottom不会和下方兄弟元素合并 - 它的
margin依然存在，但只影响其包含块边界、相邻浮动项，或触发 BFC 的父容器尺寸
为什么你感觉 margin-bottom “不占空间”？
典型现象：float: left 的 div 设了 margin-bottom: 20px，后面紧跟一个 <p></p>，但文字紧贴浮动元素底部，毫无间距。
根本不是 margin-bottom 没设上，而是：
-
<p></p>不再把浮动元素当“上一个兄弟”，而是从父容器顶部开始按 normal flow 排布 -
<p></p>的margin-top会和父容器（若塌陷）或更上层元素合并，跳过浮动项 - 父容器若未清除浮动，
height往往为 0，导致子元素的margin-bottom失去作用对象
overflow: hidden 为什么有时“管用”又“出问题”？
它触发 BFC，让父容器重新包裹浮动子项，高度恢复正常 → 子元素的 margin-bottom 终于能撑开父容器；同时也阻断父容器与外部元素的 margin 合并。
但副作用明显：
- 会裁剪所有溢出内容：
box-shadow、position: absolute下拉菜单、tooltip 全部被截断 - 若父容器内混有非浮动块级子元素，它们之间仍会发生垂直
margin合并（BFC 只隔离内外，不自动隔离内部兄弟）
现代项目里该用什么替代 float + margin？
别在浮动上下文里硬调 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避免基线错位
切记：float 和 display: flex 混用等于两套布局逻辑打架，结果不可控。
最容易被忽略的一点：浮动元素的 margin 依然完全生效，只是参照系变了——它不再推邻居，而是推包含块边缘或相邻浮动元素。如果你没看到预期效果，大概率是因为你还在用普通流的思维去调试一个已脱离文档流的元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
