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

Posted 2023-03-04

【中文标题】CSS 规则“clear: both”有啥作用？

【英文标题】：What does the CSS rule "clear: both" do?CSS 规则“clear: both”有什么作用？

【发布时间】：2012-10-04 00:22:09

【问题描述】：

以下 CSS 规则有什么作用：

.clear  clear: both; 

为什么我们需要使用它？

【问题讨论】：

当您使用 CSS float 并希望下一个元素位于下方，而不是在右侧或左侧时。

当指定元素与 clear:both 一起使用时，该元素的左右两侧不允许有浮动元素

【参考方案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% 的宽度， 但是当向左或向右浮动时，它会根据 它包含的内容。

Normal Behavior Of Block Level Element Floated Behavior Of Block Level Element

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

div's will render one after the other if they are NOT floated 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不知道有多少对象是浮动的，也不知道浮动元素的长度或宽度是多少，所以它只是不会拉伸。

Normal Flow Of The Document Sections Floated To Left Cleared Floated Elements To Stretch Background Color Of The Container

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

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

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

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

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

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

div Floated left resulting in section moving into remaining space 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
----------------------------------

【讨论】：

如果您从未听说过浮动，我建议您先阅读浮动的介绍 --- 例如，请参阅下一个答案中的链接。然后回来阅读这个答案 - 这很有意义。

请注意，浮点数并非最初被发明为具有两个并排的块级元素，这只是副作用！最初的目的是让文本内嵌在图像周围流动，因此您可以在任一方向浮动图像。

在阅读本文之前参考相关的简短答案，只是为了获得一个大致的想法..***.com/questions/16568272/…

@mr-alien 这些像jsfiddle.net/N82UD/138 这样的“错误”让我远离浮动。我像埃博拉病毒一样避开它们。也许你可以帮助我一劳永逸地与花车和平相处。

@Carlo：在 Twitter Bootstrap 等模板中大量使用的替代方案；就是把display: inline-block放在一个元素上，在父元素上你可以使用text-align: left、text-align: center或text-align: right。

【参考方案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>

【讨论】：

优秀。这是最好的答案。我想知道为什么另一个答案被接受了。

如果我们从这个场景中删除display: inline-block; css 属性会发生什么？它将inline-block 父元素拉伸到其具有类float-left 的兄弟元素。这使得“清除不影响当前块格式化上下文之外的浮点数”语句错误。有人能解释一下吗？

@SashrikaWaidyarathna：父元素不一定会为其子元素生成block formatting context。在您的示例中 (a) 删除 display: inline-block 意味着它不再生成块格式化上下文 (b) 该元素 和 内的浮动/清除第一个浮动全部成为一部分相同的块格式化上下文（视口）。

@SalmanA ，感谢您对 CSS 规范的解释。我不知道块格式化上下文的定义。

桑达尔·皮查伊分身？

【参考方案3】：

CSS float and clear

Sample Fiddle

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

【参考方案4】：

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

【讨论】：

这篇其他帖子有更多关于clearfix的详细信息：***.com/questions/211383/…

【参考方案5】：

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

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

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

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

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

阅读本教程：

【讨论】：

什么教程？