CSS clearboth属性

在本文中，我们将介绍CSS中的清除浮动（clear float）属性——clear:both。

阅读更多：CSS 教程

什么是浮动

在CSS中，浮动指的是将元素从正常的文档流中移动，并使其水平或者垂直对齐到其容器的左边、右边或者顶部、底部。

例如，我们可以使用以下CSS代码使一个元素向右浮动：

.float-right {
  float: right;
}

在使用浮动的时候，常常会遇到一些问题。

首先，当一个元素浮动之后，其容器的高度将不会自动调整，导致容器不能完全包含该元素。例如，如果以下是容器和浮动元素的CSS代码：

.container {
  border: 1px solid black;
}
.float {
  float: left;
}

那么以下的HTML代码将会导致容器不能完全包含浮动元素：

<div class="container">
  <div class="float">some text</div>
  <div class="float">some text</div>
</div>

其次，浮动元素会对其后面的元素造成影响，如果我们希望在浮动元素之后的元素不受其影响，我们需要使用清除浮动属性。

clear:both是CSS中一种清除浮动的方法，它用于清除对浮动元素的影响，使其后面的元素不受其影响，从而避免了一些奇怪的渲染问题。

例如，以下是对前面给出的HTML代码进行了清除浮动之后的代码：

.container {
  border: 1px solid black;
  clear: both;
}
.float {
  float: left;
}

<div class="container">
  <div class="float">some text</div>
  <div class="float">some text</div>
  <div style="clear:both;"></div>
</div>

可以看到，我们在容器的CSS代码中添加了clear:both属性，并在浮动元素之后加入了一个空的div元素，并将其样式设置为clear:both。这样，我们就成功地清除了浮动元素的影响。

除了clear:both属性之外，还有其他清除浮动的方法可供选择。下面我们将逐一介绍这些属性，并通过一些例子进行比较。

clear:left和clear:right属性分别表示清除左侧和右侧的浮动元素的影响。这些属性只能清除在其左侧或者右侧的浮动元素的影响，而无法清除在其上方或者下方的浮动元素的影响。例如：

.container {
  border: 1px solid black;
  clear: left;
}
.float {
  float: right;
}

<div class="container">
  <div class="float">some text</div>
  <div class="float">some text</div>
  <div style="clear:left;"></div>
</div>

在这个例子中，我们使用了clear:left属性来清除左侧的浮动元素的影响。可以看到，右侧的浮动元素仍然会对容器造成影响。

overflow:hidden和overflow:auto属性也可以用来清除浮动元素的影响。overflow:hidden可以隐藏容器中超出部分的内容，而overflow:auto会自动出现滚动条隐藏超出部分的内容。

例如：

.container {
  border: 1px solid black;
  overflow: hidden;
}
.float {
  float: left;
}

<div class="container">
  <div class="float">some text</div>
  <div class="float">some text</div>
</div>

在这个例子中，我们使用了overflow:hidden属性来清除浮动元素的影响。可以看到，容器的高度已经自动调整，但是超出部分的内容被隐藏掉了。

虽然overflow:hidden和overflow:auto可以清除浮动元素的影响，并且不需要添加额外的HTML元素，但是它们也有一些缺点。当容器中的内容超出容器的大小时，它们可能会隐藏一部分内容，从而导致问题。

在CSS中，清除浮动是一项非常重要的任务。clear:both是一种清除浮动的方法，它用于清除浮动元素的影响，并且可以保证容器完全包含浮动元素。除此之外，还有一些其他的清除浮动的方法，比如使用clear:left、clear:right、overflow:hidden和overflow:auto。

在使用清除浮动属性的时候，我们需要确保能够清除浮动元素的影响，同时不影响布局和渲染。对于不同的情况，我们可以根据需要选择不同的清除浮动的方法。