浮动元素的margin并未失效，而是因脱离文档流不再参与margin合并，其margin作用于包含块边缘或相邻浮动元素；所谓“失效”实为父容器塌陷与后续非浮动元素margin意外合并所致。
浮动元素的 margin 并没有“失效”，而是它根本不在 margin 合并的规则范围内——它脱离了普通文档流，不再和兄弟或父元素构成可合并的上下文。你看到的“重叠”“消失”“间距不对”，其实是父容器塌陷 + 后续非浮动元素的 margin 被意外合并所致。
为什么 float 元素的 margin-bottom 看似不生效？
常见现象：一个 float: left 的 div 设了 margin-bottom: 20px，但后面紧跟着的 p 文字却紧贴它底部，毫无间距。
- 根本原因不是 margin 没设上，而是该浮动元素已脱离文档流，
p不再把它当“上一个兄弟”，而是直接按 normal flow 从父容器顶部开始排布 - 此时
p的margin-top会和父容器的margin-top（或更上层兄弟）合并，跳过浮动项——用开发者工具选中p，看 computed 的margin-top是否被“上提”了 - 同时，父容器若未清除浮动，
height很可能为0，导致子元素的margin-bottom失去作用对象
给父容器加 overflow: hidden 为什么有时“管用”又“出问题”？
它确实常被用作“清浮动”的快捷方式，但效果是双刃剑：
- ✅ 触发 BFC，让父容器重新包裹浮动子项，高度恢复正常 → 子元素的
margin-bottom终于能撑开父容器 - ✅ 阻断父容器与外部元素的 margin 合并，也避免
p的margin-top向上穿透 - ❌ 会裁剪所有溢出内容：
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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
