外边距折叠指块级元素垂直外边距合并现象，可通过添加border或padding、脱离文档流（如使用flex、grid）、创建bfc（如display:flow-root）或统一使用单方向margin来避免。
外边距折叠（margin collapsing）是CSS中常见的布局现象，指的是在块级元素垂直方向上，相邻的上下外边距会合并成一个外边距，取其中较大的那个值。这在某些布局场景中会导致意料之外的间距问题。要避免外边距折叠，可以通过以下几种方式解决。
使用 padding 或 border 替代 margin
外边距折叠只发生在没有边框、内边距或内容分隔的块级元素之间。只要在两个元素之间加入 border 或 padding，就能阻止 margin 折叠。
例如：- 给父元素设置
border: 1px solid transparent - 或添加
padding: 0.1px（极小值不影响视觉）
这样父子元素之间的 margin 就不会折叠。
将元素脱离普通文档流
通过改变元素的显示方式或定位方式，使其不再参与标准流中的 margin 合并。
立即学习“前端免费学习笔记（深入）”；
- 使用
float：浮动元素不会与邻居发生外边距折叠 - 使用
display: inline-block或flex、grid - 使用
position: absolute或fixed
这些方式都能有效避免 margin 折叠，尤其推荐使用 Flexbox 布局来规避此类问题。
使用 BFC（块级格式化上下文）
创建一个新的 BFC 可以隔离元素内部的 margin 行为，防止其与外部元素发生折叠。
触发 BFC 的方法包括：overflow: hiddenoverflow: auto-
display: flow-root（推荐，语义清晰）
例如，给父容器设置 display: flow-root，即可阻止其与子元素之间的 margin 折叠。
统一使用单方向 margin
在实际开发中，可通过规范 margin 方向来减少折叠影响。
- 只使用
margin-top或margin-bottom中的一个方向 - 比如统一用
margin-bottom控制元素间距
虽然不能完全“阻止”折叠，但能让你更可控地管理布局间距，避免叠加或消失的问题。
基本上就这些常用方法。选择哪种取决于具体布局结构。现代布局推荐优先使用 Flex 或 Grid，从根本上避开传统块级元素的 margin 折叠困扰。
