CSS规则“清除：两者”有什么作用？
Answers:
我不会在这里详细解释浮点数的工作原理，因为这个问题通常集中在“ 为什么要使用clear: both;OR或到底有什么作用”方面clear: both;。
我将简单，直截了当地回答这个问题，并以图形方式向您说明为什么clear: both;需要这样做或做什么……
通常，设计师将元素向左或向右浮动，从而在另一侧创建一个空白空间，该空间允许其他元素占用剩余空间。
为什么它们会浮动元素？
当设计人员并排需要2个块级元素时，元素将浮动。例如说我们要设计一个基本的网站，其布局如下所示...
演示图像的实时示例。
演示代码
注意： 您可能必须添加header，footer，aside，section（和其他HTML5元素）为display: block;您的样式表明确提的是，元素是块级元素。
说明：
我有一个基本布局，1个标题，1个侧边栏，1个内容区域和1个页脚。
没有浮动header，接下来是aside我将用于网站侧边栏的标签，因此我将元素向左浮动。
注意：默认情况下，块级元素占用文档100％的宽度，但是当左右浮动时，它将根据其所包含的内容调整大小。
因此，正如您所注意到的，左侧浮动div的空间保留了右侧的未使用空间，这将使div后面的空间移动剩余空间。
好的，这就是块级元素向左或向右浮动时的行为，那么现在为什么是clear: both;必需的，为什么？
因此，如果您在布局演示中注明-如果您忘记了，就在这里。
我使用的是所谓的类.clear，它拥有一个名为属性clear与值both。因此，让我们看看它为什么需要both。
我已经漂浮aside和section元素的左侧，所以假设一个场景，在这里我们有一个游泳池，那里header是坚实的土地，aside和section在泳池漂浮和页脚再次坚实的土地，这样的事情..
因此，湛蓝的海水不知道浮动元素的面积是多少，它们可以大于池的面积，也可以小于池的面积，因此出现了一个普遍的问题，这困扰着90％的CSS初学者：为什么不拉伸容器元素的背景当它包含浮动元素时。这是因为容器元素在这里是一个POOL，而POOL不知道有多少对象在浮动，或者浮动元素的长度或宽度是多少，因此它根本不会拉伸。
（请参阅此答案的[Clearfix]部分，以获取整洁的方法。我div有意使用一个空的示例进行说明）
我在上面提供了3个示例，第一个是普通文档流，其中red背景将按预期方式呈现，因为容器不包含任何浮动对象。
在第二个示例中，当对象向左浮动时，容器元素（POOL）将不知道浮动元素的尺寸，因此不会延伸到浮动元素的高度。
使用后clear: both;，容器元素将被拉伸到其浮动元素的尺寸。
另一个原因 clear: both;是为了防止元素在剩余空间中向上移动。
假设您要并排放置2个元素，并在其下面放置另一个元素...因此，您需要将2个元素向左浮动，而您要在其下面放置另一个元素。
第一个例子
第二个例子
最后但并非最不重要的一点是，footer标记将在浮动元素之后呈现，因为clear在声明我的类之前我已经使用了该类footer标签，从而确保清除了所有浮动元素（向左/向右）。
Clearfix
来到与浮点数有关的clearfix。正如@Elky已经指定的那样，清除这些浮点数的方法并不是一种干净的方法，因为我们使用的div是一个不是div元素的目的。因此，这里出现了clearfix。
将其视为虚拟元素，它将在父元素结束之前为您创建一个空元素。这将自动清除包含浮动元素的包装器元素。该元素实际上不会在您的DOM中存在，但可以完成工作。
为了自清除所有具有浮动元素的包装器元素，我们可以使用
.wrapper_having_floated_elements:after { /* Imaginary class name */
content: "";
clear: both;
display: table;
}注意:after我为此使用的伪元素class。这将在包装器元素自身关闭之前为其创建一个虚拟元素。如果我们查看dom，您会看到它在Document树中的显示方式。
因此，如果看到的话，它将在浮动子项之后呈现，在该子项div中我们清除了浮点数，无非就是具有一个div具有clear: both;我们也要使用的属性的空元素。现在为什么display: table;和content不在此答案范围内，但您可以在此处了解更多有关伪元素的信息。
请注意，这也将在IE8中工作，因为IE8支持:afterpseudo。
原始答案：
大多数开发人员在其页面上左右浮动内容，可能是带有徽标，侧边栏，内容等的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
----------------------------------display: inline-block一个元素，并在家长，您可以使用text-align: left，text-align: center或text-align: right例如。
该clear属性指示在同一块格式上下文中，元素的左侧，右侧或两侧不能与更早的浮动元素相邻。清除的元素被推到相应的浮动元素下方。例子：
clear: none; 元素保持与浮动元素相邻
clear: left; 元素被推到左侧浮动元素下方
clear: right; 元素被推到右浮动元素下方
clear: both; 元素被推到所有浮动元素的下方
clear 不会影响当前块格式上下文之外的浮点数
display: inline-block;从此方案中删除css属性，将会发生什么？它将inline-block父元素扩展到其具有class的兄弟元素float-left。这使“清除不影响当前块格式上下文之外的浮点数”的语句错误。有人可以解释一下吗？
Alien先生的回答是完美的，但是无论如何我都不建议使用，<div class="clear"></div>因为这只是使您的标记变脏的黑客手段。div就不良的结构和语义而言，这是无用的空白，这也使您的代码不灵活。在某些浏览器中，该div导致额外的高度，您必须添加更高的高度height: 0;。但是，当您想在浮动元素周围添加背景或边框时，真正的麻烦就开始了，因为网络设计不当，它只会崩溃。我建议将浮动元素包装到具有clearfix CSS规则的容器中。这也是一种技巧，但是很漂亮，使用起来更灵活，并且对人类和SEO机器人可读。
clearfix：stackoverflow.com/questions/211383/...
float并希望在下一个元素时，不要在右边或左边。