margin塌陷是指相邻块级元素的垂直外边距合并现象，主要发生在兄弟元素、父子元素或空元素间，取较大margin值导致布局异常；通过设置父元素overflow:hidden可创建BFC，隔离子元素margin，防止塌陷，是简洁有效的解决方案之一。
在使用CSS进行布局时，你可能会遇到margin塌陷（Margin Collapse）问题，它会导致块级元素之间的垂直间距不符合预期，甚至影响整体布局结构。尤其是当两个相邻的块级元素设置了上下margin时，它们的margin不会简单叠加，而是“塌陷”成一个更大的margin值，这常常让开发者感到困惑。
什么是margin塌陷？
margin塌陷主要发生在以下几种情况：
- 相邻的两个块级元素的垂直margin相遇时，会合并为一个margin，取其中较大的那个值。
- 父元素与第一个或最后一个子元素之间，如果无内容、padding或border分隔，也会发生margin塌陷。
- 空的块级元素，其上下margin也会塌陷为一个。
这种行为是CSS规范的一部分，并非bug，但在实际开发中容易造成布局错位。
如何用overflow解决margin塌陷？
一个常见且有效的解决方案是：为父元素设置overflow: hidden或其他非visible值（如auto），从而阻止子元素的margin与其发生塌陷。
立即学习“前端免费学习笔记（深入）”；
原理说明：
当一个块级容器设置了 overflow: hidden 时，它会创建一个新的BFC（Block Formatting Context）。BFC内部的元素布局独立于外部，因此子元素的margin不会再与外部元素产生塌陷。
示例代码：
子元素
子元素
如果没有 overflow: hidden，父元素的上边距会被“拉下来”，看起来像是父元素没有贴着文档顶部，其实是子元素的margin-top影响了父元素本身。加上 overflow: hidden 后，这个影响被隔离，布局恢复正常。
其他避免margin塌陷的方法
除了使用 overflow，还可以考虑以下方式：
-
添加 border 或 padding：给父元素加
border: 1px solid transparent或padding: 1px，也能隔开父子margin。 - 使用 padding 替代 margin：在布局允许的情况下，用父元素的padding控制内边距。
-
Flex 或 Grid 容器：将父元素设为
display: flex或display: grid，也会自动创建BFC，阻止塌陷。 - 使用 ::before 或 ::after 伪元素：通过插入内容打破margin直接接触。
基本上就这些。虽然margin塌陷一开始可能让人头疼，但理解其机制后，选择合适的方式处理即可。用 overflow: hidden 是最简洁实用的方案之一，尤其适合不想改变结构又想快速修复布局的情况。
