浮动元素的margin-bottom对后续块级元素无效，因其脱离文档流，后续非浮动块无法以它为布局参考；真正起作用的是后续块自身的margin-top，但可能与前一非浮动块的margin-bottom发生合并。
浮动元素的 margin-bottom 为什么对后续块级元素无效
因为浮动元素脱离了普通文档流，后续非浮动块级元素在布局时“看不见”它，自然不会以它的 margin-bottom 为参考来计算位置。这不是 bug，是 CSS 规范明确的行为：浮动框不参与常规的垂直外边距合并（margin collapse），也不影响兄弟块的定位起点。
常见现象包括：
- 两个
float: left的卡片，下方卡片设置了margin-top: 20px，但实际紧贴上方卡片底部 - 浮动侧栏后紧跟一个
<p></p>，该段落的margin-top像没写一样
实操建议：
- 别给浮动子项设
margin-bottom来控制与下一个非浮动块的距离——这逻辑走不通 - 真正起作用的是：**非浮动块自身的
margin-top**，但它会和前一个非浮动块的margin-bottom合并（如果满足合并条件） - 想让浮动内容和后续内容保持固定间距？把间距逻辑转移到后续块上，并确保它不参与 margin 合并（比如用
display: flow-root包裹）
清除浮动后 margin-top 还是没反应？先检查是否触发了 margin 合并
清除浮动（如 clear: both）只解决父容器塌陷问题，它本身不阻断外边距合并。反而可能让原本被浮动遮挡的 margin 合并行为暴露出来——比如清除块后面紧跟着一个 <p></p>，它的 margin-top 和前一个块的 margin-bottom 直接叠在一起，只剩最大值。
立即学习“前端免费学习笔记（深入）”；
典型错误场景：
-
<h2 style="margin-bottom: 24px"></h2>+ 伪元素::after { content: ""; clear: both; }+<p style="margin-top: 20px"></p>→ 实际顶部空白只有 24px，不是 44px - 插入
<div style="clear:both"></div>后，上下段落间距变小甚至归零
实操建议：
- 给清除所在的父容器加
display: flow-root：既能防塌陷，又能创建 BFC 阻断 margin 外溢 - 若必须用空清除元素，至少设
min-height: 1px（比height: 0更可靠，避免某些渲染引擎下仍触发合并） - 别依赖
overflow: hidden修 margin —— 它虽能创建 BFC，但有裁剪风险（比如弹出菜单、阴影、transform 动画）
display: flow-root 是什么，为什么它比 overflow: hidden 更适合防塌陷+防合并
display: flow-root 是专为创建 BFC 设计的 display 值，语义清晰、副作用极小。它让容器既包裹内部浮动元素（解决塌陷），又隔离内外 margin（阻止合并），且不影响溢出内容显示。
对比 overflow: hidden：
-
overflow: hidden创建 BFC 是“附带效果”，主职是裁剪，容易意外隐藏box-shadow、position: absolute子元素或下拉菜单 -
display: flow-root在 Chrome 64+/Firefox 58+ 稳定支持，Safari 也早已兼容；IE 不支持，但 IE 已退出主流维护 - 当父容器需要滚动时，
overflow: auto比hidden安全，但仍不如flow-root干净
示例写法：
.container {
display: flow-root;
}
.container::after {
content: "";
clear: both;
display: table; /* 可选，仅当需兼容极老浏览器时保留 */
}注意：display: flow-root 本身已包含 BFC 行为，无需再加伪元素清除——那是历史兼容方案，现代项目可直接删掉。
浮动布局中 margin 折叠到底发不发生？一句话说清
**完全不发生。** 浮动元素（float: left 或 float: right）属于流外元素（out-of-flow box），它和任何其他元素（包括父容器、兄弟块、自身上下 margin）之间都不会触发 margin 合并。
这意味着：
- 两个上下排列的浮动
<div>，各自设 <code>margin-bottom: 10px和margin-top: 10px，它们之间就是 20px 间距，不会变成 10px - 浮动元素的
margin依然生效，只是作用对象变了：它影响的是自己相对于容器边缘或相邻浮动元素的位置，而非文档流中的兄弟块 - 如果你发现浮动项之间“没间距”，问题不在 margin 合并，而在你误用了
margin-bottom期望影响后续非浮动块——那根本不是它的职责范围
真正要警惕的，从来不是浮动导致的 margin 合并，而是清除浮动后暴露出来的、本就存在的普通块级流 margin 合并。这个点最容易被忽略，也是调试时绕最多弯路的地方。
