CSS规则“清楚：两者”有什么作用？

Question

以下CSS规则的作用是什么：

.clear { clear: both; }

为什么我们需要使用它？

Answer 1

我不会在这里（详细地）解释花车的工作方式，因为这个问题通常侧重于为什么要使用clear: both;或clear: both;究竟做什么......

我会让这个答案变得简单明了，并且会以图形方式向您解释为什么clear: both;是必需的或者它的作用......

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

为什么它们会浮动元素？

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

Live Example演示图片。

演示代码

＆＃13;

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

＆＃13;

＆＃13;

注意： 您可能需要添加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是实地，{{1} }和aside漂浮在游泳池中，页脚再次变成了坚实的土地，就像这样......



所以蓝水不知道浮动元素的区域是什么，它们可以比池更大或更小，所以这里有一个常见的问题，它使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] 部分，以便以巧妙的方式执行此操作。我正在故意使用空section示例进行说明）

我上面提供了3个示例，第1个是正常的文档流程，其中div背景将按预期呈现，因为容器没有保存任何浮动对象。

在第二个例子中，当对象浮动到左边时，容器元素（POOL）不知道浮动元素的尺寸，因此它不会伸展到浮动元素高度。 / p>



使用red后，容器元素将被拉伸到其浮动元素尺寸。



使用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

---

第一个例子



---

第二个例子



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

---

Clearfix

来清除与浮动相关的修复。正如@Elky已经指定的那样，清除这些浮动的方式并不是一种干净的方法，因为我们使用的是一个空的footer元素，它不是div元素。 。因此，这里是clearfix。

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

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

div

请注意我.wrapper_having_floated_elements:after { /* Imaginary class name */ content: ""; clear: both; display: table; } 用于:after的{​​{1}}伪元素。这将在封装元素关闭之前为其创建一个虚拟元素。如果我们查看dom，您可以看到它在Document树中的显示方式。



所以，如果你看到，它会在浮动的子class之后呈现，我们清除了浮点数，这些浮点数只相当于具有div属性的空div元素，我们是也用于此。现在为什么clear: both;和display: table;超出此答案范围，但您可以了解有关pseudo element here的更多信息。

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

---

原始答案：

大多数开发人员在他们的页面上左右浮动他们的内容，可能是包含徽标，侧边栏，内容等的div，这些div左右浮动，剩下的空间未使用，因此如果放置其他容器，它会在剩余空间中浮动，所以为了防止使用content，它会清除所有左右浮动的元素。

演示：

clear: both;

现在，如果您想在------------------ ---------------------------------- div1(Floated Left) Other div takes up the space here ------------------ ---------------------------------- 下面进行其他div渲染，那么您将使用div1，这样就可以确保清除所有浮动，左侧或右侧

clear: both;

Answer 2

clear属性表示元素的左侧，右侧或两侧不能与同一块格式化上下文中较早浮动的元素相邻。清除的元素被推到相应的浮动元素下方。例子：

clear: none;元素与浮动元素相邻

＆＃13;

＆＃13;

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

＆＃13;

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>

＆＃13;

＆＃13;

＆＃13;

clear: left;元素被推到左浮动元素

之下

＆＃13;

＆＃13;

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

＆＃13;

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>

＆＃13;

＆＃13;

＆＃13;

clear: right;元素被推到右浮动元素

之下

＆＃13;

＆＃13;

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

＆＃13;

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>

＆＃13;

＆＃13;

＆＃13;

clear: both;元素被推到所有浮动元素

之下

＆＃13;

＆＃13;

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

＆＃13;

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>

＆＃13;

＆＃13;

＆＃13;

clear不会影响当前块格式化上下文之外的浮点数

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

<强> CSS float and clear

<强> Sample Fiddle

尝试使用clear:both div从class移除sample属性，看看它是如何浮动divs的。

Answer 4

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

Answer 5

当你想在底部的另一个元素放置一个元素时，你在CSS中使用这个代码。 它用于花车。

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

要确保页脚位于这两个浮动的下方（如果您已向左和向右浮动），则将页脚放在clear: both。

这样它就会停留在两个花车下面。

（如果您只是向左清除，那么您只需要clear: left;。）

完成本教程：