外边距重叠是指相邻块级元素的垂直外边距合并为较大值；display: flow-root可创建BFC隔离重叠，兼容现代浏览器；替代方案包括加透明边框、微调padding、overflow或改用gap。
什么是外边距重叠（margin collapse）
两个相邻块级元素的垂直 margin-top 和 margin-bottom 会合并成一个，取其中较大者——不是相加，也不是忽略，是“折叠”。常见于父子元素之间（父容器没边框/内边距/内容分隔时），或兄弟 div 之间。你调了 margin-bottom: 20px 和 margin-top: 30px，结果只看到 30px 间距，就是它在作怪。
display: flow-root 怎么破掉重叠
给父容器设 display: flow-root，能创建一个新的 BFC（块级格式化上下文），让它的子元素不再和外部发生 margin 重叠。这不是“修复 margin”，而是“隔离作用域”。
无序列表呈现关键点：
-
flow-root是现代写法，替代老式overflow: hidden或float: left等副作用大的 hack - 它不影响布局流，不触发滚动条，也不改变元素浮动行为，比
overflow: auto更干净 - 兼容性：Chrome 58+、Firefox 55+、Safari 10.1+、Edge 79+；IE 完全不支持，需另配方案
- 示例：
<div class="container"> <p>第一段</p> <p>第二段</p> </div>
加.container { display: flow-root; }后，两段文字的上下 margin 就不再折叠
其他靠谱的替代方案（当不能用 flow-root）
不是所有项目都能放弃 IE 或旧浏览器，得留后手。
立即学习“前端免费学习笔记（深入）”；
无序列表呈现常用替代项：
- 给父容器加
border-top: 1px solid transparent—— 最轻量，几乎无视觉影响，兼容到 IE6 - 用
padding-top: 0.01px或padding-bottom: 0.01px—— 比加边框更隐蔽，但要注意 padding 本身可能影响盒模型计算 - 设
overflow: hidden或auto—— 有效，但可能意外截断阴影、下拉菜单或定位元素 - 避免直接对子元素设垂直 margin，改用父容器的
gap（仅 Flex/Grid 容器支持）
为什么不用 margin: 0 或负值硬调
手动清空 margin 看似简单，实际埋雷：
- 破坏组件复用性：一个
Card组件默认带margin-bottom，在列表里用没问题，单独放又得额外覆盖 - 响应式难维护：不同断点下需要不同 margin，硬写负值会让 CSS 层叠逻辑变脆弱
- 可访问性风险：屏幕阅读器依赖语义结构，靠负 margin “视觉对齐”可能让 DOM 顺序和视觉顺序错位
- 真正的问题不在 margin 值本身，而在上下文缺失——
flow-root补的是这个上下文，不是补数值
flow-root 是唯一专为此类场景设计的 display 值。别为了兼容 IE 11 就全局回退到 overflow: hidden，该用 feature detection 加降级就加，不然哪天遇到伪元素遮挡或阴影裁剪，还得回头翻文档。 
