以下CSS规则的作用是什么：
.clear{clear:both；}
为什么我们需要使用它
我不会在这里（详细地）解释浮动是如何工作的，因为这个问题通常集中在为什么使用clear:both或清除的内容：两者准确执行…
我将保持这个答案的简单性和针对性，并将以图形方式向您解释为什么清晰：两者都清楚是必需的或它的作用
通常，设计师将元素向左或向右浮动，从而在另一侧创建一个空白空间，允许其他元素占用剩余空间
为什么它们会浮动元素
当设计器需要2个并排的块级元素时，元素将浮动。例如，我们想设计一个基本的网站，其布局如下
演示图像的现场示例
演示代码
/*css:*/
*{/*与浮动无关/两者都清除，仅用于演示目的*/
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
}
页眉、页脚{
边框：5px实心#000；
高度：100px；
}
旁白{
浮动：左；
宽度：30%；
边框：5px实心#000；
高度：300px；
}
部分{
浮动：左；
宽度：70%；
边框：5px实心#000；
高度：300px；
}
.清楚{
明确：两者皆有；
}<；！--HTML-->；
<；标题>；
标题
</标题>；
<；旁白>；
靠边（向左浮动）
</旁白>；
<；第节>；
内容（向左浮动，也可以向右浮动）
</第节>；
<；！--清除浮动元素-->；
<；div class=“清除”></部门>；
<；页脚>；
页脚
</页脚>注意：您可能需要添加页眉，页脚，旁白，部分（和其他HTML5元素）作为显示：块在样式表中，用于明确说明元素是块级元素。
说明：
我有一个基本布局，一个页眉，一个侧栏，一个内容区和一个页脚
对于标题，没有浮动，接下来是旁边的标记，我将用于我的网站边栏，因此我将浮动元素到左侧
注意：默认情况下，块级元素占据文档100%的宽度，
但当向左或向右浮动时，它将根据
它所包含的内容
- 块级元素的正常行为
- 块级元素的浮动行为
因此，正如您所注意到的，左侧浮动的div使其右侧的空间未被使用，这将允许其后面的div在剩余空间中移动
div如果不浮动，则会一个接一个地呈现div如果向左或向右浮动，将彼此并排移动
好的，这就是块级元素在向左或向右浮动时的行为，那么现在为什么清除：两者必需，为什么
因此，如果您在布局演示中注意到-如果您忘记了，这里就是
我使用的是一个名为.clear的类，它拥有一个名为clear的属性，其值为both。让我们来看看为什么它需要两个
我已经将元素浮动到左侧的旁边和部分元素，因此假设一个场景，我们有一个池，其中页眉是实心地，旁边和部分在池中浮动，页脚又是实心地，类似这样的情况
所以blue water不知道浮动元素的面积是多少，它们可以比池大或小，所以这里有一个困扰90%CSS初学者的常见问题：为什么容器元素的背景在容纳浮动元素时没有拉伸。这是因为容器元素在这里是一个池，而池不知道有多少对象是浮动的，也不知道浮动元素的长度或宽度，所以它不会拉伸
- 文件的正常流程
- 各部分向左浮动
- 清除浮动元素以拉伸容器的背景色
（请参阅此答案的[Clearfix]部分，以了解实现此目的的简洁方法。我有意使用一个空的div示例进行解释）
我在上面提供了3个示例，第一个是正常的文档流，redbackground将按预期渲染，因为容器不包含任何浮动对象
在第二个示例中，当对象向左浮动时，容器元素（池）将不知道浮动元素的尺寸，因此它不会延伸到浮动元素的高度
使用clear后：两者皆有，容器元素将拉伸到其浮动元素维度
清晰的另一个原因是：两者都有用于防止元素在剩余空间中上移
假设你想要两个元素并排，下面还有一个元素。。。因此，您将向左浮动2个元素，并希望另一个元素位于其下方
div向左浮动，导致部分移动到剩余空间- 浮动
div已清除，以便部分标记将呈现在浮动divs下方
第一个例子
第二个例子
最后但并非最不重要的一点是，footer标记将在浮动元素之后呈现，因为我在声明我的footer标记之前使用了clear类，这确保所有浮动元素（左/右）都被清除到该点
Clearfix
来到与浮动相关的clearfix。正如@Elky已经指定的那样，我们清除这些浮动的方式并不是一种干净的方式，因为我们使用的是一个空的div元素，它不是div元素的本意。因此，出现了clearfix
将其视为一个虚拟元素，它将在父元素结束之前为您创建一个空元素。这将自动清除包含浮动元素的包装器元素。这个元素实际上不存在于DOM中，但可以完成任务
要自清除任何具有浮动元素的包装器元素，我们可以使用
.wrapper\u具有浮动元素：{/*虚类名之后*/
内容：“；
明确：两者皆有；
显示：表格；
}
注意：在我为该类使用的伪元素之后。这将在包装器元素关闭之前为其创建一个虚拟元素。如果我们查看dom，您可以看到它如何显示在文档树中
因此，如果您看到，它是在浮动的子元素div之后渲染的，在这里我们清除浮动，这只相当于有一个空的div元素，带有clear:both属性，我们也在使用该属性。现在为什么显示：表格和内容不在此范围内，但您可以在此处了解有关伪元素的更多信息
请注意，这也将在IE8中起作用，因为IE8支持：afterpseudo
原始答复：
大多数开发人员在页面上左右浮动内容，可能是包含徽标、边栏、内容等的div，这些div向左或向右浮动，剩余空间未使用，因此如果您放置其他容器，它也会在剩余空间中浮动，因此为了防止清除：两者”，则它将清除向左或向右浮动的所有元素
演示：
----------------------------------------------
div1（左浮动）其他div占据了此处的空间
------------------ ----------------------------------
现在，如果您想使另一个div呈现在div1下面，那么您将使用clear:both因此它将确保您清除所有浮动，左侧或右侧
------------------
第1部分（左浮动）
------------------
<；div style=“clear:both；”和<--这<；部门>；充当分隔符--></部门>；
----------------------------------
其他div现在在这里渲染
----------------------------------