<main>
  <section>
    <h3>同一个 BFC 下外边距会发生折叠</h3>
    <div class="bfc">
      <div class="box mb-100 bg-red"></div>
      <div class="box mt-100 bg-red"></div>
    </div>
  </section>
  <section>
    <h3>不同的 BFC 容器中，外边距不会重叠</h3>
    <div class="bfc">
      <div class="box mb-100 bg-red"></div>
      <div class="bfc">
        <div class="box mt-100 bg-red"></div>
      </div>
    </div>
  </section>
</main>

main {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 10px;
}
.mt-100 {
  margin-top: 100px;
}
.mb-100 {
  margin-bottom: 100px;
}
.bfc {
  overflow: hidden;
}
.bg-red {
  background: red;
}
.box {
  width: 100%;
  height: 100px;
}