CSS规则“清除:两者"是什么?做? [英] What does the CSS rule "clear: both" do?

问题描述

以下CSS规则有什么作用?

What does the following CSS rule do:

.clear { clear: both; }

为什么我们需要使用它?

And why do we need to use it?

推荐答案

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

I won't be explaining how the floats work here (in detail), as this question generally focuses on Why use clear: both; OR what does clear: both; exactly do...

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

I'll keep this answer simple, and to the point, and will explain to you graphically why clear: both; is required or what it does...

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

Generally designers float the elements, left or to the right, which creates an empty space on the other side which allows other elements to take up the remaining space.

当设计器并排需要2个块级元素时，元素将浮动.例如说我们要设计一个基本的网站，其布局如下图所示.

Elements are floated when the designer needs 2 block level elements side by side. For example say we want to design a basic website which has a layout like below...

实时示例 .

演示代码

/*  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;，以便显式提到这些元素是块级元素.

Note: You might have to add header, footer, aside, section (and other HTML5 elements) as display: block; in your stylesheet for explicitly mentioning that the elements are block level elements.

我有一个基本布局，有1个标题，1个侧边栏，1个内容区域和1个页脚.

I have a basic layout, 1 header, 1 side bar, 1 content area and 1 footer.

header没有浮动，接下来是我将在网站侧边栏中使用的aside标签，因此我将元素向左浮动.

No floats for header, next comes the aside tag which I'll be using for my website sidebar, so I'll be floating the element to left.

注意:默认情况下，块级元素占用文档100％的宽度， 但是当向左或向右浮动时，它将根据 内容.

Note: By default, block level element takes up document 100% width, but when floated left or right, it will resize according to the content it holds.

1. 块级元素的正常行为
2. 块级元素的浮动行为

1. Normal Behavior Of Block Level Element
2. Floated Behavior Of Block Level Element

因此，请注意，左侧浮动的div保留了未使用的右侧空间，这将允许div移入剩余空间.

So as you note, the left floated div leaves the space to its right unused, which will allow the div after it to shift in the remaining space.

1. div如果未浮动，则将一个接一个地渲染
2. 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;是必需的，为什么?

Ok, so this is how block level elements behave when floated left or right, so now why is clear: both; required and why?

因此，如果您在布局演示中注明-如果您忘记了，请 此处 是的.

So if you note in the layout demo - in case you forgot, here it is..

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

I am using a class called .clear and it holds a property called clear with a value of both. So lets see why it needs both.

我已经将aside和section元素向左浮动，所以假设有一个场景，我们有一个池，其中header是坚固的土地，aside和section漂浮在池中页脚又是坚实的土地，像这样.

I've floated aside and section elements to the left, so assume a scenario, where we have a pool, where header is solid land, aside and section are floating in the pool and footer is solid land again, something like this..

因此，蓝色的水不知道浮动元素的面积是多少，它们可能大于池的面积，也可能小于池的面积，所以这是一个使90％的CSS初学者感到困扰的常见问题:为什么容器元素的背景当它包含浮动元素时不会拉伸.这是因为容器元素在这里是 POOL ，而 POOL 不知道有多少个对象在浮动，或者该元素的长度或宽度是多少，所以它很简单不会伸展.

So the blue water has no idea what the area of the floated elements are, they can be bigger than the pool or smaller, so here comes a common issue which troubles 90% of CSS beginners: why the background of a container element is not stretched when it holds floated elements. It's because the container element is a POOL here and the POOL has no idea how many objects are floating, or what the length or breadth of the floated elements are, so it simply won't stretch.

1. 文档的正常流程
2. 各节向左浮动
3. 清除浮动元素以拉伸容器的背景颜色

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

(有关此方法的整洁方法，请参见此答案的 ^[Clearfix] 部分.我故意使用一个空的div示例进行解释)

(Refer ^[Clearfix] section of this answer for neat way to do this. I am using an empty div example intentionally for explanation purpose)

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

I've provided 3 examples above, 1st is the normal document flow where red background will just render as expected since the container doesn't hold any floated objects.

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

In the second example, when the object is floated to left, the container element (POOL) won't know the dimensions of the floated elements and hence it won't stretch to the floated elements height.

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

After using clear: both;, the container element will be stretched to its floated element dimensions.

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

Another reason the clear: both; is used is to prevent the element to shift up in the remaining space.

假设您要并排放置2个元素，并在其下面放置另一个元素...因此，您将向左浮动2个元素，而在其下面放置另一个元素.

Say you want 2 elements side by side and another element below them... So you will float 2 elements to left and you want the other below them.

1. div向左浮动导致section移入剩余空间
2. 清除了浮动div，以便section标记将呈现在浮动的div s下方

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

---

第一个示例

---

1st Example

最后但并非最不重要的是，footer标签将在浮动元素之后呈现，因为我在声明我的footer标签之前使用了clear类，这确保了所有浮动元素(左/右)已经清除到了这一点.

Last but not the least, the footer tag will be rendered after floated elements as I've used the clear class before declaring my footer tags, which ensures that all the floated elements (left/right) are cleared up to that point.

来到与浮点数有关的clearfix.正如 @Elky 所指定的那样，清除这些浮点数的方法并不是一种干净的方法，因为我们正在使用空的div元素不是div元素.因此，出现了clearfix.

Coming to clearfix which is related to floats. As already specified by @Elky, the way we are clearing these floats is not a clean way to do it as we are using an empty div element which is not a div element is meant for. Hence here comes the clearfix.

将其视为虚拟元素，它将在父元素结束之前为您创建一个空元素.这将自动清除包含浮动元素的包装器元素.从字面上看，该元素将不存在于您的DOM中，但可以完成工作.

Think of it as a virtual element which will create an empty element for you before your parent element ends. This will self clear your wrapper element holding floated elements. This element won't exist in your DOM literally but will do the job.

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

To self clear any wrapper element having floated elements, we can use

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

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

Note the :after pseudo element used by me for that class. That will create a virtual element for the wrapper element just before it closes itself. If we look in the dom you can see how it shows up in the Document tree.

因此，如果看到的话，它会在浮动子元素div之后呈现，在该子元素中我们清除了浮点数，这只不过等于有一个具有clear: both;属性的空div元素，我们也正在使用此元素.现在，为什么display: table;和content不在此答案范围内，但是您可以了解有关此处的伪元素.

So if you see, it is rendered after the floated child div where we clear the floats which is nothing but equivalent to have an empty div element with clear: both; property which we are using for this too. Now why display: table; and content is out of this answers scope but you can learn more about pseudo element here.

请注意，这也将在IE8中使用，因为 IE8支持:after伪.

Note that this will also work in IE8 as IE8 supports :after pseudo.

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

Most of the developers float their content left or right on their pages, probably divs holding logo, sidebar, content etc., these divs are floated left or right, leaving the rest of the space unused and hence if you place other containers, it will float too in the remaining space, so in order to prevent that clear: both; is used, it clears all the elements floated left or right.

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

现在，如果要在div1下面进行另一个div渲染，那么将使用clear: both;，这样将确保您清除所有向左或向右的浮点数

Now what if you want to make the other div render below div1, so you'll use clear: both; so it will ensure you clear all floats, left or right

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

这篇关于CSS规则“清除:两者"是什么?做?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！