<main>
  <section>
    <h3>普通容器</h3>
    <div class="border-1">
      <div class="box float-left bg-red"></div>
    </div>
  </section>
  <section>
    <h3>BFC容器</h3>
    <div class="border-1" style="overflow: hidden;">
      <div class="box float-left bg-red"></div>
    </div>
  </section>
</main>

main {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 10px;
}
.bfc {
  overflow: hidden;
}
.box {
  width: 200px;
  height: 200px;
}
.border-1 {
  border: 2px solid #000;
}
.float-left {
  float: left;
}
.bg-red {
  background: red;
}