如果你浮动内容，你可以向左或向右浮动…所以在一个常见的布局中，你可能有一个左侧导航，一个内容div和一个页脚。

为了确保页脚位于这两个浮动的下面(如果你已经向左和向右浮动)，你将页脚置为clear: both。

这样它将保持在两个浮动的下方。

(如果你只清理左边，那么你只需要clear: left;。)

我不会在这里详细解释浮点数是如何工作的，因为这个问题通常集中在为什么使用clear: both;或者clear: both;到底做什么…上

我将保持这个答案简单，并将向你解释为什么需要clear: both;或它是做什么的…

通常，设计师会将元素向左或向右浮动，从而在另一侧创造出一个空白空间，让其他元素占据剩余的空间。

为什么它们是浮动元素?

当设计人员需要两个并排的块级元素时，元素是浮动的。例如，我们想要设计一个基本的网站，它的布局如下…

< <强>生活例子/强>的演示图像。

演示代码

/*  CSS:  */


* { /* Not related to floats / clear both, used it for demo purpose only */
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}


header, footer {
border: 5px solid #000;
height: 100px;
}


aside {
float: left;
width: 30%;
border: 5px solid #000;
height: 300px;
}


section {
float: left;
width: 70%;
border: 5px solid #000;
height: 300px;
}


.clear {
clear: both;
}

<!-- HTML -->
<header>
Header
</header>
<aside>
Aside (Floated Left)
</aside>
<section>
Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
Footer
</footer>

注意: 你可能必须在样式表中添加__ABC0， __ABC1， __ABC2， __ABC3(和其他HTML5元素)作为display: block;来显式地提到元素是块级元素。

解释:

我有一个基本的布局，1页眉，1侧栏，1内容区和1页脚。

没有浮动header，接下来是aside标签，我将用于我的网站边栏，所以我将浮动元素到左边。

注意:默认情况下，块级元素占文档宽度的100%， 但当向左或向右浮动时，它将根据

1. Block Level Element的正常行为
2. 块级元素的浮动行为

1. div's如果没有被浮动，将一个接一个地呈现
2. div如果向左或向右浮动，将彼此移位

这就是块级元素在左右浮动时的行为，那么为什么需要clear: both;呢?

所以如果你在布局演示中注意到——以防你忘了，这里<强> < / >强它是..

我正在使用一个名为.clear的类，它拥有一个名为clear的属性，其值为both。所以让我们看看为什么它需要both。

我已经将aside和section元素浮动到左边，所以假设有一个场景，我们有一个池，其中header是固体土地，aside和section漂浮在池中，footer又是固体土地，类似这样。

所以蓝色的水不知道浮动元素的面积是多少，它们可以比池大，也可以比池小，所以这里有一个困扰90%的CSS初学者的常见问题:为什么容器元素的背景是不拉伸的，当它持有浮动元素。这是因为容器元素在这里是池，而池不知道有多少对象是浮动的，也不知道浮动元素的长度或宽度，所以它根本不会伸缩。

1. 文件的正常流程
2. Sections floating To Left .
3. 清除浮动元素来拉伸容器的背景颜色

1. div向左浮动，导致section移动到剩余空间
2. 浮动的div被清除，以便__ABC1标记将呈现在浮动的div下面

1例

第二个例子

最后但并非最不重要的是，footer标记将在浮动元素之后呈现，因为我在声明footer标记之前使用了clear类，这确保了所有浮动元素(左/右)都被清除。

Clearfix

接下来是clearfix，它与浮动有关。正如@Elky中已经指定的那样，清除这些浮点数的方法并不干净，因为我们使用的是空div元素，而它不是div元素的目的。因此，这里出现了明确的修正。

可以把它看作是一个虚拟元素，它将在父元素结束之前为您创建一个空元素。这将自动清除包含浮动元素的包装器元素。这个元素并不存在于你的DOM中，但是它会起作用。

要自清除任何具有浮动元素的包装器元素，可以使用

.wrapper_having_floated_elements:after {  /* Imaginary class name */
content: "";
clear: both;
display: table;
}

注意我为那个class. conf使用的:after伪元素。这将在包装器元素关闭之前为它创建一个虚拟元素。如果我们查看dom，你可以看到它是如何在文档树中显示的。

因此，如果你看到，它是在被浮动的子元素div之后呈现的，其中我们清除了浮动，这只相当于有一个空的div元素，具有clear: both;属性，我们也在使用这个属性。现在，为什么display: table;和content不在这个答案范围内，但你可以了解更多关于这里的伪元素的信息。

注意，这也将在IE8作为IE8支持:after伪工作。

最初的回答:

大多数开发人员将他们的内容向左或向右浮动在他们的页面上，可能是带有logo、侧边栏、内容等的div，这些div被向左或向右浮动，留下剩余的空间未使用，因此如果你放置其他容器，它也将浮动在剩余的空间中，所以为了防止使用clear: both;，它将清除所有向左或向右浮动的元素。

演示:

------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------

现在，如果你想让另一个div渲染在div1下面，那么你将使用clear: both;，这样它将确保你清除所有的浮动，向左或向右

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------

CSS浮动和清除

Sample Fiddle

只需尝试使用class sample从div中删除clear:both属性，并查看它如何跟随浮动divs。

Alien先生的答案是完美的，但无论如何我不建议使用<div class="clear"></div>，因为它只是一个hack，使你的标记脏。就糟糕的结构和语义而言，这是无用的空div，这也使您的代码不灵活。在一些浏览器中，这个div会导致额外的高度，你必须添加height: 0;，这更糟糕。但真正的麻烦开始于当你想要在浮动元素周围添加背景或边框时——它会崩溃，因为网页设计得很糟糕。我建议将浮动元素包装到具有clearfix CSS规则的容器中。这是黑客以及，但漂亮，更灵活的使用和可读的人类和搜索引擎优化机器人。

< >强clear < / >强属性表示在相同的块格式化上下文中，元素的左侧、右侧或两侧不能与之前的浮动元素相邻。被清除的元素被推到相应的被浮动元素下面。例子:

clear: none;元素仍然与被浮动元素相邻

body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 60px;
background: #CEF;
}
.float-right {
float: right;
width: 60px;
height: 60px;
background: #CEF;
}
.clear-none {
clear: none;
background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>

clear: left;元素被推到左浮动元素之下

body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 60px;
background: #CEF;
}
.float-right {
float: right;
width: 60px;
height: 120px;
background: #CEF;
}
.clear-left {
clear: left;
background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>

clear: right;元素被推到右边的浮动元素下面

body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 120px;
background: #CEF;
}
.float-right {
float: right;
width: 60px;
height: 60px;
background: #CEF;
}
.clear-right {
clear: right;
background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>

clear: both;元素被推到所有浮动元素之下

body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 60px;
background: #CEF;
}
.float-right {
float: right;
width: 60px;
height: 60px;
background: #CEF;
}
.clear-both {
clear: both;
background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>

clear不影响当前块格式化上下文之外的浮点数

body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 120px;
background: #CEF;
}
.inline-block {
display: inline-block;
background: #BDF;
}
.inline-block .float-left {
height: 60px;
}
.clear-both {
clear: both;
background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="inline-block">
<div>display: inline-block;</div>
<div class="float-left">float: left;</div>
<div class="clear-both">clear: both;</div>
</div>