浮动是CSS中常见的布局方式，它可以让元素脱离文档流，从而实现页面的自由排列。但是当浮动元素下方存在其他元素时，往往会出现一些布局问题，如元素重叠、文字环绕不到等等。而clearboth这个属性正是针对这些问题而出现的，它可以使得某一个元素下方所有的浮动元素都被清除，从而避免一些布局上的不良影响。

一、清除浮动带来的布局问题

1.1 元素重叠

当我们想要实现两个浮动元素相邻排列时，却发现它们发生了重叠，显然这样的布局效果是不理想的。

这是因为既然元素浮动了，就意味着它对周围的元素位置没有影响，如果我们不对它进行特别的处理，它就会一直浮动在周围。而另外一个浮动元素将直接覆盖它，从而造成这样的“层叠”效果。

1.2 文字环绕效果异常

在实际的页面设计中，我们经常需要实现文字环绕图片的布局效果，但如果出现浮动元素的情况，文字环绕就会出现异常。

比如在下方的实例中，我们使用float: left的方式将图片浮动了起来，然后插入了一段段文字。但是当我们希望这些文字环绕图片时，却发现文字直接从图片下方开始，与图片并没有环绕的效果。

1.3 父容器高度异常

在HTML页面中，难免会出现浮动元素多个相邻的情况。而当这些浮动元素是包含在一个父容器中时，如果没有特别的处理，往往会出现父容器高度异常的问题。

这是因为浮动元素脱离了文档流，不再对外部元素的大小和位置起到影响，而父容器在没有子元素的情况下默认高度为0，因此也无法正常展示。这一问题会影响整个页面的设计，尤其是在响应式布局中，极为麻烦。

二、clearboth的作用

clearboth是CSS中用于清除浮动带来的布局问题的常见方式之一。它可以让某个元素下方的所有浮动元素都被清除，从而避免造成上述的一系列布局错误。我们可以将其作为一个样式属性来使用，如下所示：

```css

.clearboth {

clear: both;

}

```

这一属性顾名思义，叫做“清除两侧浮动”，它可以实现以下几个作用：

2.1 解决元素重叠问题

通过给某个元素增加clearboth属性，可以轻松解决浮动元素重叠的问题，使页面上的布局变得更加清晰、自然。

2.2 解决文字环绕异常问题

通过在父容器下方为文字所在元素增加clearboth属性，可以让文字环绕正常展示，以达到理想的布局效果。

2.3 解决父容器高度异常问题

通过给父容器下方增加一个空的元素，并在此元素上设置clearboth属性，可以解决父容器高度异常的问题，让页面整体更加美观。

```html