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

Question

以下CSS规则有什么作用：

.clear { clear: both; }

为什么我们需要使用它？

Answer 1

我不会在这里详细解释浮点数的工作原理，因为这个问题通常集中在“ 为什么要使用clear: both;OR或到底有什么作用”方面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后面的空间移动剩余空间。
   

3. div如果未浮动，则将一个接一个地渲染

4. 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 下方呈现