为何给h1设置margin-top会导致body下移？Flex布局为何有效？

你给<h1>设置margin-top: 5rem后，预期只有<h1>自身下移，但实际整个<body>都跟着下移了，给<body>添加Flex布局后问题消失，核心原因是垂直外边距塌陷（Margin Collapse）。

问题复现代码 #

CSS代码

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
}

header {
  background-color: gray;
  height: 200px;
}

body > header > h1 {
  margin-top: 5rem;
}

HTML代码

<body>
  <header>
    <h1>
      EXAMPLE
    </h1>
  </header>
</body>

原因解析 #

• 块级元素的垂直外边距默认会发生合并：当子元素（<h1>）的margin-top碰到父元素（<header>）的顶部，且父元素没有设置边框（border）、内边距（padding），也没创建BFC（块级格式化上下文）时，子元素的外边距会“穿透”父元素，和父元素的外边距合并成一个。
• 这里<header>没有任何阻止外边距塌陷的属性，所以<h1>的margin-top直接作用在了<header>上，而<header>和<body>之间也没有隔离属性，最终这个外边距导致<body>整体下移。

Flex布局解决问题的原理 #

当给<body>设置display: flex; flex-direction: column;后，<body>变成了Flex容器，Flex容器默认会创建BFC。BFC的特性之一就是阻止垂直外边距塌陷，子元素的外边距会被限制在容器内部，不会再穿透到父元素层级，所以<h1>的margin-top只会让自己在<header>内部下移，不会影响<body>的位置，问题自然解决。

内容的提问来源于stack exchange，提问作者Torvia