margin-top“失效”实为与前一非浮动块的margin-bottom发生垂直外边距合并，只保留最大值；根本解法是父容器设display: flow-root触发bfc阻断合并，或用min-height: 1px避免空清除元素透传合并。
浮动元素本身不参与外边距合并，但会让后续非浮动块的 margin-top 看似“失效”——根本不是 margin 没写对，而是它和前一个非浮动块的 margin-bottom 合并了。
为什么 margin-top 在浮动后元素上“不生效”
你给一个 <p></p> 设置了 margin-top: 20px，但它紧贴着前面的浮动盒子底部，空白为 0。这不是浏览器 bug，也不是清除浮动失败，而是：<p></p> 的 margin-top 和它前面那个非浮动块（比如 <h2></h2>）的 margin-bottom 发生了垂直外边距合并（margin collapse），只保留最大值。
常见触发链：<h2 style="margin-bottom: 24px"></h2> → 浮动容器（含 ::after { clear: both }）→ <p style="margin-top: 16px"></p> → 实际顶部空白 = 24px，不是 40px。
- 用开发者工具选中该
<p></p>，看 computed 样式里margin-top是否显示为0—— 如果是，说明已被合并 - 清除浮动（
clear: both）只解决父容器塌陷，不阻断 margin 合并 - 空的清除元素（如
::after { content: ""; clear: both }）若未触发 BFC，就是合并的“通道”
用 display: flow-root 阻断合并最干净
display: flow-root 是专为创建 BFC 设计的 display 值，它让容器既包裹浮动子项（防塌陷），又隔离内外 margin（防合并），且无裁剪副作用。
- 比
overflow: hidden更安全：不会意外裁掉box-shadow、position: absolute子元素或 transform 动画溢出部分 - 现代浏览器全覆盖（Chrome 64+ / Firefox 58+ / Safari 15.4+），IE 不支持但已退出主流
- 若父容器已设
display: flex或display: grid，flow-root会被覆盖，无效
示例：.container { display: flow-root; } —— 一行代码同时解决塌陷 + margin 合并暴露问题。
必须用 clear: both 元素时，怎么避免合并
老项目无法改结构？别用空 <div style="clear:both"></div>，它高度为 0，仍会透传 margin 合并。
- 正确写法：
<div style="clear:both; min-height: 1px"></div>——min-height: 1px是最轻量、最可靠的打断方式 - 伪元素同理：
::after { content: ""; display: table; clear: both; min-height: 1px; } - 避免
height: 0; font-size: 0; line-height: 0组合，某些字体渲染下仍不稳定
别再依赖 float + margin 控制布局间距
浮动本就不是为布局设计的，它的 margin 行为隐晦、不可预测，尤其在嵌套或响应式场景下极易失控。
-
float: left元素的margin-bottom对后续非浮动块完全无效，因后者“看不见”它 - IE6/7 的 “3px bug”、反向浮动换行不可控、
font-size: 0下行框偏移等问题，都会干扰视觉间距 - 更现实的选择：
display: flex+gap，或display: grid，语义清晰、响应友好、margin 行为可预期
真正容易被忽略的点是：BFC 不是“清浮动”的开关，而是 margin 行为的分水岭 —— 它决定你的 margin 是作用在内部，还是“漏出去”跟兄弟元素合并。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
