方法一：边框防止外边距合并
原理解析
在普通块级元素的垂直布局中，外边距合并问题经常出现。相邻盒子的顶部和底部外边距会彼此抵消或叠加，导致实际间距与预期不符。这种现象在页面结构较简单、没有边距隔离时尤为明显。通过在父容器或子元素上引入一个可见或不可见的边界，可以强制打破折叠，从而实现稳定的间距分布。
具体而言，给目标元素的父容器或子元素添加一个边框，虽然边框可能不可见，但它能够创建一个新的边界，从而让外边距不再与父级边距折叠，达到“独立间距”的效果。
/* 方法一示例：边框阻断折叠 */
.parent { border: 1px solid transparent; }
.child { margin-top: 20px; }
实战要点
在实际应用中，透明边框是一种简单而稳定的实现手段，几乎不会对视觉呈现产生影响；同时要注意边框的存在可能会改变父容器的实际尺寸，需要相应调整父容器的宽高以避免布局错位。此法的核心在于通过边界打破折叠机制，使外边距保持独立。
如果页面要严格保持原有视觉风格，又不想引入明显的边框，可以将目标改为在父容器上使用一个固定的内边距来间接实现边距的非折叠效果；不过作者此处聚焦边框方案以实现稳定的三招之一。
示例要点回顾
要点在于：边框即可防止外边距折叠，并且尽量使用透明边框以减少视觉影响，同时关注父容器的尺寸与盒子模型的配合，确保整体排版的可控性。
方法二：使用 Flex 布局
原理与效果
采用Flex 布局的容器可以让子项的外边距与父容器的边距公开地分离，外边距不会像传统块级布局那样折叠。在纵向排列的场景中，flex 容器创建了新的格式化上下文，从而实现对间距的更精准控制。
将父容器设为 display: flex，并让子项按列方向排列（flex-direction: column），能够使每个子项的顶部外边距与前一个元素的底部外边距独立存在，避免了意外的间距缩减。
/* 方法二示例：Flex 布局避免外边距折叠 */
.container { display: flex; flex-direction: column; }
.item { margin-top: 20px; }
实战要点
如果页面结构较复杂，需要在局部区域应用该技巧，可以仅对需要的区域设置Flex 布局，避免对全局布局产生副作用。对于水平排列的场景，仍然可以通过合理的边距设置来实现期望的间距。
需要注意的是，Flex 布局改变了盒子模型的默认行为，因此在与其他布局模式混合使用时，务必对父容器和子项的尺寸属性进行必要的调整，以避免意外的换行或错位。
方法三：overflow:hidden 三招全解
原理与应用场景
给容器设置 overflow: hidden，会使该容器触发一个新的块级格式化上下文（BFC）。在这样的上下文中，子元素的外边距不再与父容器的边距发生折叠，因此可以稳定地控制垂直间距。
当页面中的某些块级元素需要避免外边距折叠时，使用 overflow: hidden 可以作为一种简洁的解决方案，尤其在包含多列或浮动元素时，能够提升布局的可预测性。
/* 方法三示例：overflow:hidden 触发 BFC，防止外边距折叠 */
.parent { overflow: hidden; }
.child { margin-top: 20px; }
注意事项与替代方案
应用 overflow: hidden 需要留意可能带来的截断滚动或子元素内容溢出的问题。如果内容需要滚动或完全显示，考虑使用 overflow: auto 或把溢出内容放入其他容器再处理，以保持布局的整洁性。
