margin 塌陷问题

margin 塌陷问题
一、问题描述
在 CSS 布局中，当两个垂直方向的元素嵌套时，子元素设置了 margin-top 或 margin-bottom，而父元素没有设置 padding 或 border 时，可能会出现子元素的 margin 值 “溢出” 到父元素外面，导致父元素也跟着移动的现象，这就是 margin 塌陷问题。
二、产生原因
相邻元素：垂直方向上相邻的元素，它们的 margin 会合并，最终的 margin 大小为两者中较大的值。
父子元素：当父元素没有 padding 或 border 时，子元素的 margin-top 会传递给父元素，使得父元素产生塌陷，好像父元素被子元素的 margin 推开。
三、解决方法
使用 padding 或 border：
为父元素添加一个微小的 padding 或 border，可以阻止子元素的 margin 传递给父元素。

css
.parent {
    padding-top: 1px;
}

这样就可以避免子元素的 margin-top 导致父元素塌陷，但是会增加父元素的尺寸，可能会影响布局的精确性。
使用 overflow 属性：
将父元素的 overflow 属性设置为 hidden 或 auto。

css
.parent {
    overflow: hidden;
}

这种方法可以触发 BFC（Block Formatting Context），BFC 会包含内部元素的 margin，从而避免塌陷，但要注意可能会带来一些副作用，比如当内容超出父元素时，可能会出现滚动条或隐藏内容。
使用伪元素：
通过为父元素添加 ::before 或 ::after 伪元素，并将其设置为 display: table。

css
.parent::before {
    content: "";
    display: table;
}

这会创建一个匿名表格单元，也能触发 BFC，防止 margin 塌陷，同时不会对布局产生其他影响。
使用 display: flex 或 display: grid：
将父元素设置为 flex 或 grid 布局。

css
.parent {
    display: flex;
}

这些布局方式会创建新的布局上下文，不会出现 margin 塌陷问题，而且是比较现代的布局方式，在一些复杂的布局中可能会有更好的表现，但需要注意它们对布局的其他影响，例如 flex 布局会使子元素默认排列在一行。
四、示例
以下是一个 margin 塌陷的示例：
html