css需要清除的,css - CSS规则“清除：两者”有什么作用？ - 堆栈内存溢出

我不会在这里详细解释浮点数的工作原理，因为这个问题通常集中在为什么要使用clear: both; 或clear: both; 确实是...

我将使答案简单明了，并以图形方式向您说明为什么clear: both; 是必需的或其作用...

通常，设计人员将元素向左或向右浮动，从而在另一侧创建一个空白空间，该空间允许其他元素占用剩余空间。

为什么它们浮动元素？

当设计人员并排需要2个块级元素时，元素将浮动。 例如说我们要设计一个基本的网站，其布局如下图所示。

演示图像的实时示例 。

演示代码

/* 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; }

Header Aside (Floated Left) Content (Floated Left, Can Be Floated To Right As Well)

Footer

注意： 您可能必须将header ， footer ， aside ， section (和其他HTML5元素)添加为display: block; 在样式表中明确提到元素是块级元素。

说明：

我有一个基本布局，1个标题，1个侧边栏，1个内容区域和1个页脚。

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

注意：默认情况下，块级元素占用文档100％的宽度，但是向左或向右浮动时，它将根据其持有的内容调整大小。

因此，正如您所注意到的，左侧浮动div保留了未使用其右侧的空间，这将使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;

}

注意我在class使用的:after伪元素。 这将在包装器元素自身关闭之前为其创建一个虚拟元素。 如果我们查看dom，您会看到它在Document树中的显示方式。

因此，如果看到的话，它将在浮动子div之后呈现，我们在其中清除了浮点数，这只不过等于具有带clear: both;的空div元素clear: both; 我们也为此使用的属性。 现在为什么display: table; 并且content超出了答案的范围，但是您可以在这里了解更多的伪元素 。

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

原始答案：

大多数开发人员在其页面上左右浮动内容，可能是带有徽标，边栏，内容等的div，这些div则是左右浮动，剩下的空间未使用，因此，如果您放置其他容器，它将漂浮在剩余的空间中，所以为了防止这种情况的发生clear: both; 使用时，它会清除所有向左或向右浮动的元素。

示范：

------------------ ----------------------------------

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

------------------ ----------------------------------

现在，如果要使另一个div呈现在div1以下，该怎么办，将使用clear: both; 这样可以确保您清除所有左侧或右侧的浮标

------------------

div1(Floated Left)

------------------

----------------------------------

Other div renders here now

----------------------------------