清除浮动后margin-top失效的根本原因是垂直外边距合并（margin collapse），而非清除失败；需用display:flow-root创建bfc阻断合并，或给清除元素设min-height:1px防塌陷。
浮动元素后面的兄弟元素，其 margin-top 或 margin-bottom 看似失效，根本不是 margin 没写对，而是它和前一个块级元素的外边距发生了合并（margin collapse），而清除浮动本身不阻断这个合并。
为什么清除浮动后 margin-top 还是没反应
你加了 clear: both，父容器高度也撑开了，但紧跟在浮动组后面的 <p></p> 依然紧贴着上一个标题、毫无间距——这不是清除失败，是垂直外边距合并暴露出来了。
- 典型场景：
<h2></h2>设了margin-bottom: 24px，后面跟一个伪元素清除（::after { clear: both; }），再跟一个<p></p>设了margin-top: 16px，结果两者之间只有 24px，不是 24 + 16 = 40px - 原因：清除元素（尤其是空的
::after）若未触发 BFC，就无法打断 margin 合并链路；<h2></h2>的下边距直接和<p></p>的上边距“叠”在一起，取较大值 - 验证方式：打开开发者工具，选中那个
<p></p>，看 computed 样式里margin-top是否为 0 —— 如果是，说明它被合并掉了，不是没生效
overflow: hidden 为什么能“顺便”修好 margin
给浮动元素的父容器设 overflow: hidden，常被说成“清浮动”，其实它真正起作用的是创建了一个 BFC（块级格式化上下文）。
- BFC 容器会隔离内部 margin，不让它和外部兄弟元素发生合并
- 浮动子项被完全包含，父容器高度不再塌陷，后续兄弟元素就有了明确的布局参照系
- 副作用要注意：
overflow: hidden可能裁剪掉box-shadow、position: absolute子元素的溢出部分 - 更干净的替代：
display: flow-root，语义清晰、无裁剪风险，现代浏览器全覆盖（IE 不支持，但 IE 已退出主流）
用 min-height: 1px 打断清除元素的 margin 合并
如果你必须用 clear: both 元素（比如老项目不能动结构），别让它空着——空的清除块极易成为 margin 合并的“通道”。
- 错误写法：
<div style="clear:both"></div>—— 高度为 0，不阻断合并 - 正确写法：
<div style="clear:both; min-height: 1px"></div>—— 最轻量、最可靠地让清除元素参与文档流 - 伪元素同理：
::after { content: ""; display: table; clear: both; min-height: 1px; }（display: table确保块级，min-height: 1px阻断合并） - 避免用
height: 0; font-size: 0; line-height: 0组合——在某些字体渲染下仍可能不稳定
真正容易被忽略的点是：**BFC 不是“清浮动”的开关，而是 margin 行为的分水岭**。哪怕你用 display: flow-root 把父容器改成 BFC，如果后续兄弟元素自己又和更上层元素发生 margin 合并，问题还会复现。所以检查范围得从“浮动父容器”一直往上推到最近的共同祖先。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
