<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.


一个二次元web开发咸鱼