CSS 规则“clear: both”有什么作用？

Question

以下 CSS 规则有什么作用：

.clear { clear: both; }

为什么我们需要使用它？

Answer 1

我不会在这里（详细）解释浮点数是如何工作的，因为这个问题通常集中在为什么使用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;
}
<!-- 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>

注意： 您可能必须在样式表中添加header、footer、aside、section（和其他 HTML5 元素），display: block;以明确提及这些元素是块级元素。

解释：

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

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

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

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

因此，正如您所注意到的，左侧浮动的左侧div空间未使用，这将允许其div在剩余空间中移动。

1. div‘s 将一个接一个地渲染，如果它们没有浮动
2. div如果向左或向右浮动，将彼此并排移动

好的，这就是块级元素在向左或向右浮动时的行为方式，那么现在为什么clear: both;需要，为什么？

因此，如果您在布局演示中记下 - 万一您忘记了，这里就是..

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

我已经漂浮aside并且section元素向左，所以假设一个场景，我们有一个水池，那里header是实心土地，aside并且section漂浮在水池中并且页脚再次是实心土地，就像这样..

所以蓝水不知道浮动元素的面积是多少，可以比水池大，也可以比水池小，所以90%的CSS初学者都会遇到一个常见的问题：为什么容器元素的背景没有被拉伸当它包含浮动元素时。这是因为容器元素在这里是一个POOL ，而POOL不知道有多少对象是浮动的，也不知道浮动元素的长度或宽度是多少，所以它根本不会拉伸。

1. 文件的正常流程
2. 向左浮动的部分
3. 清除浮动元素以拉伸容器的背景颜色

（请参阅此答案的[Clearfix]部分以获得巧妙的方法。我div故意使用一个空示例进行解释）

我在上面提供了 3 个示例，第一个是正常的文档流，其中red背景将按预期呈现，因为容器不包含任何浮动对象。

在第二个示例中，当对象向左浮动时，容器元素 (POOL) 将不知道浮动元素的尺寸，因此它不会拉伸到浮动元素的高度。

使用后clear: both;，容器元素将被拉伸到其浮动元素尺寸。

使用的另一个原因clear: both;是防止元素在剩余空间中向上移动。

假设您想要 2 个并排的元素和它们下方的另一个元素......所以您将向左浮动 2 个元素，并且您想要在它们下方的另一个元素。

1. div向左浮动导致section移动到剩余空间
2. 浮动div清除，以便section标签将在浮动divs下方呈现

---

第一个例子

---

第二个例子

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

---

清除修复

来到与浮动有关的 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
----------------------------------