在css中，通过为父元素设置 overflow: hidden、display: flex 或 display: grid 可以触发bfc（块级格式化上下文），从而彻底解决父子外边距折叠问题。其核心原理是bfc形成了一个独立的渲染区域，内部的子元素无法与外部元素发生外边距重叠，因此子元素的 margin-top 不会传递到父元素上。
overflow: hidden 触发BFC的具体实现
使用 overflow: hidden 是最常见的触发BFC方式。只需将父容器的 overflow 属性设置为 hidden、auto 或 scroll 即可。这种方式会创建一个包含块，子元素的垂直外边距将被限制在该块内部，不会穿透到父元素之外。
.parent {
overflow: hidden;
/* 其他样式 */
}
.child {
margin-top: 20px;
}在上述代码中，.parent 设置了 overflow: hidden，创建了BFC。.child 的 margin-top: 20px 只会影响 .child 自身的位置，而不会导致 .parent 的上外边距增加20px。父元素的上边界将保持在文档流的原始位置，子元素则在其内部向下偏移20px。
立即学习“前端免费学习笔记（深入）”；
display: flex 触发BFC的效果
除了 overflow 属性，将父元素设置为弹性布局（display: flex）也能触发BFC。Flex容器是一个BFC，其内部的Flex项（子元素）的外边距折叠行为被抑制。这意味着子元素的 margin-top 不会与父元素的外边距发生折叠。
.parent {
display: flex;
}
.child {
margin-top: 20px;
}在此示例中，.parent 作为Flex容器，其内部的 .child 元素虽然设置了 margin-top: 20px，但该外边距不会传递给父元素。父元素的高度仅由内容决定，不会因为子元素的外边距而增加额外的空间。这种方式的优点是同时实现了水平或垂直排列，且无需担心外边距折叠问题。
未触发BFC时的外边距折叠现象
当父元素未触发BFC时，子元素的垂直外边距会发生折叠。例如，如果父元素没有设置任何触发BFC的属性，子元素的 margin-top 会与父元素的 margin-top 合并。这会导致父元素整体向下移动，而不是子元素在父元素内部向下移动。
.parent {
/* 无BFC触发属性 */
}
.child {
margin-top: 20px;
}在上述代码中，由于 .parent 未触发BFC，.child 的 margin-top: 20px 会与 .parent 的外边距折叠。结果可能是 .parent 整体向下移动20px，或者如果 .parent 也有 margin-top，两者取最大值进行折叠。这种现象在布局中常导致意外的间距问题，因此需要通过触发BFC来避免。
