CSS 清除浮动的几种方式及其优缺点

CSS 清除浮动主要有以下几种方式：

1. 使用额外的标签，并为其应用 clear 属性。

<div style="float: left;">左侧内容</div>
<div style="float: right;">右侧内容</div>
<div style="clear: both;"></div>

优点是简单直接，缺点是可能会在页面中引入不必要的元素。

2. 使用伪元素 ::after 清除浮动。

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

<div class="clearfix">内容</div>

优点是不需要修改HTML结构，缺点是兼容性较低，不支持IE6/7。

3. 使用 overflow 属性。

.overflow-hidden {
  overflow: hidden;
}

<div class="overflow-hidden">内容</div>

优点是兼容性好，缺点是如果子元素超出父元素范围时可能会隐藏内容。

4. 使用 flex 布局。

.flex-container {
  display: flex;
}

<div class="flex-container">内容</div>

优点是现代布局方式，可以很好的适应各种屏幕和设备，缺点是不支持老版本的浏览器。

5. 使用 grid 布局。

.grid-container {
  display: grid;
}

<div class="grid-container">内容</div>

优点是现代布局方式，可以很好的适应各种屏幕和设备，缺点是不支持老版本的浏览器。