css - CSS规则“清除:两者”有什么作用？

Question

以下CSS规则有什么作用：

.clear { clear: both; }

为什么我们需要使用它？

Answer 1

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

我将使答案简单明了，并以图形方式向您说明为什么需要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标签将在浮动元素之后呈现，因为在声明我的 clear标签之前，我已经使用过 footer类，这可以确保清除所有浮动元素（左/右）到这一点。



Clearfix

来到与浮点数有关的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不在此答案范围内，但是您可以了解有关 pseudo element here的更多信息。

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



原始答案：

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

示范：

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

现在，如果要在 div1下进行另一个div渲染，那么将使用 clear: both;，这样可以确保清除所有浮动，无论是左侧还是右侧

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------