清除浮动后父容器“吃掉”子元素margin-top实为外边距合并暴露，因清除操作恢复父容器边界，使子元素margin-top与其上边缘合并；display:flow-root是最优解，既创建bfc包裹浮动又阻断合并。
清除浮动后，为什么父容器突然“吃掉”子元素的 margin-top？
这不是清除浮动本身导致的，而是清除动作让父容器重新获得对子元素的“感知力”，从而暴露出本就存在的外边距合并（margin collapse）问题。子元素的 margin-top 一直存在，但之前因父容器塌陷、无高度、无边界，它直接“透出”到父容器外部；一旦清除浮动（比如用 clear: both 或触发 BFC），父容器有了实际边界，子元素的 margin-top 就立刻与父容器的上边缘发生合并——你看到的“被顶开”，其实是合并结果终于显形了。
哪些清除方式会意外加剧 margin 合并？
部分清除手段不阻断合并，反而让父子关系更“裸露”，加剧视觉错位：
-
overflow: hidden：虽能包裹浮动，但若父容器本身无border或padding，子元素margin-top仍会与其上边缘合并 -
clear: both加在兄弟元素上：只解决后续元素入流问题，对当前父容器的边界状态毫无影响，父子合并照常发生 - 伪元素 clearfix（
::after+clear: both）：同样不给父容器加物理边界，仅修复高度塌陷，不阻断 margin 合并
真正能同时解决浮动塌陷和 margin 合并的写法
关键不是“清浮动”，而是“建边界”或“启 BFC”——两者必须同时满足包裹浮动 + 阻断合并：
- 加
border-top: 1px solid transparent：计算值border-width > 0，满足阻断合并的硬条件，且不改变视觉；注意会增加 1px 盒模型高度 - 加
padding-top: 1px：语义更清晰，原理相同；但若父容器有固定height，会挤压内容区 -
display: flow-root：现代方案，既创建独立 BFC 包裹浮动，又天然阻断 margin 合并，无副作用，Chrome 64+/Firefox 62+ 支持
为什么 float 元素自己不参与 margin 合并？
因为浮动元素已脱离普通文档流，不再属于当前块格式化上下文（BFC）中的“普通块级盒”。而 margin 合并只发生在同一 BFC 内的普通块级元素之间。所以：
- 浮动元素的
margin-top不会和上面兄弟元素合并 - 浮动元素的
margin-bottom不会和下面兄弟元素合并 - 浮动元素的
margin依然生效，只是作用对象变成其包含块（containing block）的边缘或相邻浮动元素
别指望靠浮动来“绕开”合并问题——它只是把问题转移了：你得手动控制所有间距，且父容器塌陷后，子元素的 margin 更容易“漏出去”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
