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

Question

以下 CSS 规则有什么作用：

.clear { clear: both; }

为什么我们需要使用它？

Answer 1

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

我将保持这个答案简单明了，并以图形方式向您解释为什么需要clear: both; 或它的作用...

通常设计师将元素浮动到左侧或右侧，这会在另一侧创建一个空白空间，从而允许其他元素占据剩余空间。

他们为什么浮动元素？

当设计师需要 2 个并排的块级元素时，元素会浮动。例如，假设我们要设计一个基本网站，其布局如下...

Live Example 的演示图像。

演示代码

/*  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. Normal Behavior Of Block Level Element
2. Floated Behavior Of Block Level Element

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

1. div's will render one after the other if they are NOT floated
2. div will shift beside each other if floated left or right

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

因此，如果您在布局演示中记下 - 以防您忘记了，here 就是......

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

我已将aside 和section 元素浮动到左侧，因此假设我们有一个水池，其中header 是实心土地，aside 和section 漂浮在水池中和页脚又是坚实的土地，像这样..

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

1. Normal Flow Of The Document
2. Sections Floated To Left
3. Cleared Floated Elements To Stretch Background Color Of The Container

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

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

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

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

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

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

1. div Floated left resulting in section moving into remaining space
2. Floated div cleared so that the section tag will render below the floated divs

---

第一个例子

---

第二个例子

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

---

清除修复

来到与浮动相关的 clearfix。正如@Elky 已经指定的那样，我们清除这些浮点数的方式并不是一种干净的方式，因为我们使用的是一个空的div 元素，它不是div 元素的用途。因此，clearfix 出现了。

把它想象成一个虚拟元素，它会在你的父元素结束之前为你创建一个空元素。这将自动清除包含浮动元素的包装元素。这个元素实际上不会存在于你的 DOM 中，但会完成这项工作。

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

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

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

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

请注意，这在 IE8 中也可以作为 IE8 supports :after pseudo 使用。

---

原答案：

大多数开发人员在他们的页面上向左或向右浮动他们的内容，可能是带有徽标、侧边栏、内容等的 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
----------------------------------

Answer 2

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>

Answer 3

CSS float and clear

Sample Fiddle

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

Answer 4

先生。 Alien 的答案是完美的，但无论如何我不建议使用<div class="clear"></div>，因为它只是一个让你的标记变脏的黑客。这是无用的空div 就结构和语义不好，这也使您的代码不灵活。在某些浏览器中，这个 div 会导致额外的高度，您必须添加 height: 0; 这更糟。但是当你想在你的浮动元素周围添加背景或边框时，真正的麻烦就开始了——它会因为web was designed badly而崩溃。我建议将浮动元素包装到具有clearfix CSS 规则的容器中。这也是 hack，但美观、更灵活、更易于人类和 SEO 机器人阅读。

Answer 5

当您希望将一个元素放置在另一个元素的底部时，您可以在 CSS 中使用此代码。 它用于浮动。

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

为确保页脚保持在这两个浮动下方（如果您已左右浮动），请将页脚设置为 clear: both。

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

（如果你只清除左边那么你真的只需要clear: left;。）

阅读本教程：