清除浮动的几种方式，各自的优缺点

1.使用空div清除浮动：

优点：简单易实现，适用于多个浮动元素相邻的情况。

缺点:需要增加额外的无意义元素，不够语义化。

2.使用clearfix类清除浮动：

优点：简单易实现，不需要增加额外元素。

缺点:需要在CSS中定义clearfix类，不够语义化。

3.使用overflow属性清除浮动：

优点：简单易实现，不需要增加额外元素，适用于父容器有确定高度的情况。

缺点：会出现滚动条，可能影响布局。

4.使用after伪元素清除浮动：

优点：不需要增加额外元素。

缺点：需要在CSS中定义伪元素样式。

 较常用且推荐的清除浮动的方式是使用after伪元素清除浮动。它不需要增加额外元素，且语义化较好

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div class="clearfix">
  <!-- 浮动元素 -->
</div>