<main>
  <section>
    <h3>普通容器</h3>
    <div>
      <div class="box float-left bg-red">我是一个左浮动的元素</div>
      <div class="text">我是一个没有设置浮动, 
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>
    </div>   
  </section>
  <section>
    <h3>BFC 容器</h3>
    <div>
      <div class="box float-left bg-red">我是一个左浮动的元素</div>
      <div class="text" style="overflow: hidden;">我是一个没有设置浮动, 但是触发了 BFC 的元素, width: 200px; height:200px; background: #eee;</div>
    </div>   
  </section>
</main>

main {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 10px;
}
.box {
  width: 100px;
  height: 100px;
}
.bg-red {
  background: red;
}
.float-left {
  float: left;
}
.text {
  width: 200px;
  height: 200px;
  background: #eee;
}