<section class="info-container w-full h-auto ">
  <div class="float-left" style="width: 640px; height: 400px"></div>
  <div class="float-left" style="width: 1000px; height: 400px"></div>
</section>

<section class="w-full bg-black" style="height: 900px"></section>

<style scoped>
.info-container::after{
  content: "";
  display: block;
  clear: both;
}
</style>

浮动造成的影响：当我把第一个section里的div都设置浮动排列在一行之中后这两个div就会脱离标准文档流，第一个scetion会失去高度，第二个seciton也会跑到第一个section的位置。

理想之中的效果：第一个scetion中的div通过浮动排列一行，第一个section也没有失去高度，第二个section还在原来的位置

解决方法：通过给第一个section加个after伪元素，设置display：block和clear：both就可以清除第一个section的内部元素的浮动带来的后续影响了（利用伪元素清除浮动应该算是最常用的清除浮动的方法了）

Q.E.D.