请解释 CSS 中的 margin 重叠现象，即相邻元素的垂直外边距合并问题，并阐述其发生的条件和有效的解决手段。

回答思路

1. 【回答框架 1】Margin 重叠（又称外边距合并）指的是在垂直方向上，相邻元素的 margin-top 与 margin-bottom 会发生合并，取两者中较大的值作为最终间距，而非相加。该现象只发生在块级元素的垂直方向，水平方向不会合并。
2. 【回答框架 2】触发条件主要有三种：相邻兄弟元素的垂直外边距；父元素与第一个或最后一个子元素的 margin-top/bottom 之间的合并；以及空元素自身上下 margin 的合并。根元素（html）不参与合并，浮动、绝对定位和 overflow 非 visible 的元素不会与其子元素发生合并。
3. 【回答框架 3】解决手段的核心是阻断合并发生。常见方法有：给父元素创建 BFC（如设置 overflow: hidden、display: inline-block、position: absolute 等），使父元素与子元素的外边距不再合并；给父子之间添加 padding 或 border；对于兄弟元素，可以通过使用 flex 或 grid 布局来规避，因为 flex 和 grid 容器的子项不会发生外边距合并。
4. 【回答框架 4】实际开发中，更推荐使用现代布局方案（如 flex 或 grid）来彻底避免 margin 合并带来的间距计算困扰。若仍需使用传统块级布局，则优先通过创建 BFC 或添加透明边框/内边距的方式精准控制间距，并注意 margin 合并只影响垂直方向，水平方向无需处理。
5. 【关键点 1】Margin 重叠只发生在块级元素的垂直方向，取较大值而非相加。
6. 【关键点 2】形成 BFC 可阻止父元素与子元素的 margin 合并。
7. 【关键点 3】使用 flex/grid 布局后，其子元素不会发生 margin 重叠。
8. 【关键点 4】相邻兄弟元素的 margin 合并可通过给其中一个元素设为 BFC 或添加 padding/border 解决。
9. 【易错点 1】误以为 margin 重叠是浏览器 bug，实际是 CSS 规范定义的正常行为。
10. 【易错点 2】仅通过设置 overflow: hidden 创建 BFC 解决合并，但该属性可能有副作用，如裁剪内容或影响滚动，需谨慎使用。
11. 【易错点 3】忽略了父元素与子元素的 margin 合并，导致实际间距与预期不符，且 margin 为负值时合并规则更复杂，需额外留意。