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

- 日理万妓 2022-11-24 14:14 128阅读 0赞

本文翻译自：[What does the CSS rule “clear: both” do?][What does the CSS rule _clear_ both_ do]

*What does the following CSS rule do:* **以下CSS规则有什么作用：**

.clear { clear: both; }

*And why do we need to use it?* **为什么我们需要使用它？**

--------------------

### \#1楼 ###

参考：[https://stackoom.com/question/S0we/CSS规则-清除-两者-有什么作用][https_stackoom.com_question_S0we_CSS_-_-_-]

--------------------

### \#2楼 ###

*When you want one element placed at the bottom other element you use this code in CSS.* **当您希望一个元素位于其他元素的底部时，可以在CSS中使用此代码。** *It is used for floats.* **它用于浮子。**

*If you float content you can float left or right... so in a common layout you might have a left nav, a content div and a footer.* **如果您浮动内容，则可以向左或向右浮动...因此，在常见布局中，您可能会有一个左导航，一个内容div和一个页脚。**

*To ensure the footer stays below both of these floats (if you have floated left and right) then you put the footer as `clear: both` .* **为了确保页脚停留在这两个浮点的下方（如果您左右浮动），则将页脚设置为`clear: both` 。**

*This way it will stay below both floats.* **这样，它将保持在两个浮点以下。**

*(If you are only clearing left then you only really need to `clear: left;` .)* **（如果您只需要清除左，那么您只需要`clear: left;` ）**

*Go through this tutorial:* **完成本教程：**

--------------------

### \#3楼 ###

*I won't be explaining how the floats work here (in detail), as this question generally focuses on Why use `clear: both;`* **我不会在这里详细解释浮点数的工作原理，因为这个问题通常集中在*为什么要使用`clear: both;`*** *OR what does `clear: both;`* ***或`clear: both;`*** *exactly do...* ***确实是...***

*I'll keep this answer simple, and to the point, and will explain to you graphically why `clear: both;`* **我将使答案简单明了，并以图形方式向您说明为什么`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.* **通常，设计人员将元素向左或向右浮动，从而在另一侧创建一个空白空间，该空间允许其他元素占用剩余空间。**

# *Why do they float elements?* **为什么它们浮动元素？** #

*Elements are floated when the designer needs 2 block level elements side by side.* **当设计人员并排需要2个块级元素时，元素将浮动。** *For example say we want to design a basic website which has a layout like below...* **例如说我们要设计一个基本的网站，其布局如下图所示。**

![在此处输入图片说明][a3mXz.jpg]

*[**Live Example**][Live Example] of the demo image.* **演示图像的[实时示例][Live Example] 。**

*Code For Demo* **演示代码**

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

<header> Header </header> <aside> Aside (Floated Left) </aside> <section> Content (Floated Left, Can Be Floated To Right As Well) </section>  <div class="clear"></div> <footer> Footer </footer>

***Note:** You might have to add `header` , `footer` , `aside` , `section` (and other HTML5 elements) as `display: block;`* **注意： *您可能必须将`header` ， `footer` ， `aside` ， `section` （和其他HTML5元素）添加为`display: block;`*** *in your stylesheet for explicitly mentioning that the elements are block level elements.* ***在样式表中明确提到元素是块级元素。***

## *Explanation:* **说明：** ##

*I have a basic layout, 1 header, 1 side bar, 1 content area and 1 footer.* **我有一个基本布局，1个标题，1个侧边栏，1个内容区域和1个页脚。**

*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.* **`header`没有浮动，接下来是我将用于网站侧边栏的`aside`标签，因此我将元素浮动到左侧。**

> *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.* **注意：默认情况下，块级元素占用文档100％的宽度，但是向左或向右浮动时，它将根据其持有的内容调整大小。**

1.  *[Normal Behavior Of Block Level Element][]* **[块级元素的正常行为][Normal Behavior Of Block Level Element]**
2.  *[Floated Behavior Of Block Level Element][]* **[块级元素的浮动行为][Floated Behavior Of Block Level Element]**

*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.* **因此，正如您所注意到的，左侧浮动`div`保留了未使用其右侧的空间，这将使`div`之后的`div`移入剩余空间。**

1.  *[`div` 's will render one after the other if they are NOT floated][div_ _s will render one after the other if they are NOT floated]* **[`div`没有浮动，它们将一个接一个地渲染][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][div_ will shift beside each other if floated left or right]* **[如果向左或向右浮动， `div`将彼此并排移动][div_ will shift beside each other if floated left or right]**

*Ok, so this is how block level elements behave when floated left or right, so now why is `clear: both;`* **好的，这就是块级元素向左或向右浮动时的行为，所以现在很`clear: both;`** *required and why?* **必需，为什么？**

*So if you note in the layout demo - in case you forgot, [**here**][Live Example] it is..* **因此，如果您在布局演示中注明-如果您忘记了，就[在这里][Live Example] 。**

*I am using a class called `.clear` and it holds a property called `clear` with a value of `both` .* **我正在使用一个名为`.clear`的类，它包含一个名为`clear`的属性，且`both`值。** *So lets see why it needs `both` .* **因此，让我们看看为什么`both`需要。**

*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..* **我已经在左侧浮动了`aside`和`section`元素，因此假设有一个场景，我们有一个池，其中`header`是固定土地， `aside`和`section`在池中浮动，而页脚又是固定土地，类似这样。**

![浮动视图][UwFxL.jpg]

*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.* **因此，蓝色的水不知道浮动元素的面积是多少，它们可以大于池的面积，也可以小于池的面积，因此出现了一个使90％的CSS初学者感到困扰的常见问题：为什么容器元素的背景没有拉伸当它包含浮动元素时。** *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.* **这是因为容器元素在这里是一个POOL ，而POOL不知道有多少个对象在浮动，或者浮动元素的长度或宽度是多少，因此它根本不会拉伸。**

1.  *[Normal Flow Of The Document][]* **[文件的正常流动][Normal Flow Of The Document]**
2.  *[Sections Floated To Left][]* **[剖面向左浮动][Sections Floated To Left]**
3.  *[Cleared Floated Elements To Stretch Background Color Of The Container][]* **[清除浮动元素以拉伸容器的背景色][Cleared Floated Elements To Stretch Background Color Of The Container]**

*(Refer \[Clearfix\] section of this answer for neat way to do this. I am using an empty `div` example intentionally for explanation purpose)* **（请参阅此答案的\[Clearfix\]部分，以获取整洁的方法。我有意使用一个空的`div`示例进行说明）**

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

*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.* **在第二个示例中，当对象向左浮动时，容器元素（POOL）将不知道浮动元素的尺寸，因此不会拉伸到浮动元素的高度。**

![在此处输入图片说明][vmmUS.jpg]

*After using `clear: both;`* **使用完后`clear: both;`** *, the container element will be stretched to its floated element dimensions.* **，则容器元素将被拉伸到其浮动元素的尺寸。**

![在此处输入图片说明][MjP6D.jpg]

*Another reason the `clear: both;`* **另一个原因`clear: both;`** *is used is to prevent the element to shift up in the remaining space.* **用于防止元素在剩余空间中向上移动。**

*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.* **假设您要并排放置2个元素，并在其下面放置另一个元素...因此，您需要将2个元素向左浮动，然后将另一个元素放置在它们下面。**

1.  *[`div` Floated left resulting in `section` moving into remaining space][div_ Floated left resulting in _section_ moving into remaining space]* **[`div`向左浮动，导致`section`移至剩余空间][div_ Floated left resulting in _section_ moving into remaining space]**
2.  *[Floated `div` cleared so that the `section` tag will render below the floated `div` s][Floated _div_ cleared so that the _section_ tag will render below the floated _div_ s]* **[已清除浮动`div`以便`section`标签将在浮动`div`下方呈现][Floated _div_ cleared so that the _section_ tag will render below the floated _div_ s]**

--------------------

## *1st Example* **第一个例子** ##

![在此处输入图片说明][urCUS.jpg]

--------------------

## *2nd Example* **第二个例子** ##

![在此处输入图片说明][HNB63.jpg]

*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.* **最后但并非最不重要的一点是，在声明`footer`标签之前，由于我使用`clear`类，所以`footer`标签将在浮动元素之后呈现，这可以确保清除所有浮动元素（向左/向右）。**

--------------------

### *Clearfix* **Clearfix** ###

*Coming to clearfix which is related to floats.* **来到与浮点数有关的clearfix。** *As already specified by [@Elky][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.* **正如[@Elky][Elky]已经指定的[那样][Elky] ，清除这些浮点数的方法并不是一种干净的方法，因为我们正在使用一个空的`div`元素，而这不是`div`元素的目的。** *Hence here comes the clearfix.* **因此，这里出现了clearfix。**

*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.* **该元素实际上不会在您的DOM中存在，但可以完成工作。**

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

*Note the `:after` pseudo element used by me for that `class` .* **注意我在`class`使用的`:after`伪元素。** *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.* **如果我们查看dom，您会看到它在Document树中的显示方式。**

[![Clearfix][]][Clearfix]

*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;`* **因此，如果看到的话，它将在浮动子`div`之后呈现，我们在其中清除了浮点数，这只不过等于具有带`clear: both;`的空`div`元素`clear: both;`** *property which we are using for this too.* **我们也为此使用的属性。** *Now why `display: table;`* **现在为什么`display: table;`** *and `content` is out of this answers scope but you can learn more about [pseudo element here][] .* **并且`content`超出了答案的范围，但是您可以[在这里][pseudo element here]了解更多的[伪元素][pseudo element here] 。**

*Note that this will also work in IE8 as [IE8 supports `:after` pseudo][IE8 supports _after_ pseudo] .* **注意，这也将在IE8中工作，因为[IE8支持`:after`伪][IE8 supports _after_ pseudo] 。**

--------------------

# *Original Answer:* **原始答案：** #

*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;`* **大多数开发人员在其页面上左右浮动内容，可能是带有徽标，边栏，内容等的div，这些div则是左右浮动，剩下的空间未使用，因此，如果您放置其他容器，它将漂浮在剩余的空间中，所以为了防止这种情况的发生`clear: both;`** *is used, it clears all the elements floated left or right.* **使用时，它会清除所有向左或向右浮动的元素。**

## *Demonstration:* **示范：** ##

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

*Now what if you want to make the other div render below `div1` , so you'll use `clear: both;`* **现在，如果要使另一个div呈现在`div1`以下，该怎么办，将使用`clear: both;`** *so it will ensure you clear all floats, left or right* **这样可以确保您清除所有左侧或右侧的浮标**

------------------
    div1(Floated Left)
    ------------------
    <div style="clear: both;"></div>
    ----------------------------------
    Other div renders here now
    ----------------------------------

--------------------

### \#4楼 ###

***[CSS float and clear][]*** **[CSS浮动和清除][CSS float and clear]**

***[Sample Fiddle][]*** **[样品小提琴][Sample Fiddle]**

*Just try to remove `clear:both` property from the `div` with `class` `sample` and see how it follows floating `divs` .* **只需尝试使用`class` `sample`从`div`清除`clear:both`属性，然后查看它如何跟随`divs`浮动。**

--------------------

### \#5楼 ###

*Mr. Alien's answer is perfect, but anyway I don't recommend to use `<div class="clear"></div>` because it just a hack which makes your markup dirty.* **Alien先生的回答是完美的，但是无论如何我都不建议使用`<div class="clear"></div>`因为它只是一种使标记变脏的hack。** *This is useless empty `div` in terms of bad structure and semantic, this also makes your code not flexible.* **就不良的结构和语义而言，这是没有用的空`div` ，这也使您的代码不灵活。** *In some browsers this div causes additional height and you have to add `height: 0;`* **在某些浏览器中，此div会导致额外的高度，您必须添加`height: 0;`** *which even worse.* **更糟的是。** *But real troubles begin when you want to add background or border around your floated elements - it just will collapse because [web was designed badly][CSS float and clear] .* **但是，当您想在浮动元素周围添加背景或边框时，真正的麻烦就开始了，因为[网络设计不当，][CSS float and clear]它只会崩溃。** *I do recommend to wrap floated elements into container which has [clearfix][] CSS rule.* **我建议将浮动元素包装到具有[clearfix][] CSS规则的容器中。** *This is hack as well, but beautiful, more flexible to use and readable for human and SEO robots.* **这也是一种技巧，但它美观，易于使用且对人类和SEO机器人可读。**

--------------------

### \#6楼 ###

*The [**`clear`**][clear] property indicates that the left, right or both sides of an element can not be adjacent to earlier floated elements within the same block formatting context.* **[`clear`][clear]属性指示在同一块格式上下文中，元素的左侧，右侧或两侧不能与更早的浮动元素相邻。** *Cleared elements are pushed below the corresponding floated elements.* **清除的元素被推到相应的浮动元素下方。** *Examples:* **例子：**

### `clear: none;` *Element remains adjacent to floated elements* **元素保持与浮动元素相邻** ###

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;` *Element pushed below left floated elements* **元素被推到左侧浮动元素下方** ###

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;` *Element pushed below right floated elements* **元素被推到右浮动元素下方** ###

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;` *Element pushed below all floated elements* **元素被推到所有浮动元素的下方** ###

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

### *`clear` does not affect floats outside the current block formatting context* **`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>

[What does the CSS rule _clear_ both_ do]: https://oldbug.net/q/S0we/What-does-the-CSS-rule-clear-both-do
[https_stackoom.com_question_S0we_CSS_-_-_-]: https://stackoom.com/question/S0we/CSS%E8%A7%84%E5%88%99-%E6%B8%85%E9%99%A4-%E4%B8%A4%E8%80%85-%E6%9C%89%E4%BB%80%E4%B9%88%E4%BD%9C%E7%94%A8
[a3mXz.jpg]: https://i.stack.imgur.com/a3mXz.jpg
[Live Example]: http://jsfiddle.net/ps5vx/
[Normal Behavior Of Block Level Element]: http://jsfiddle.net/cpEYu/
[Floated Behavior Of Block Level Element]: http://jsfiddle.net/cpEYu/1/
[div_ _s will render one after the other if they are NOT floated]: http://jsfiddle.net/tUGV7/
[div_ will shift beside each other if floated left or right]: http://jsfiddle.net/tUGV7/1/
[UwFxL.jpg]: https://i.stack.imgur.com/UwFxL.jpg
[Normal Flow Of The Document]: http://jsfiddle.net/wcafZ/733/
[Sections Floated To Left]: http://jsfiddle.net/wcafZ/734/
[Cleared Floated Elements To Stretch Background Color Of The Container]: http://jsfiddle.net/wcafZ/735/
[vmmUS.jpg]: https://i.stack.imgur.com/vmmUS.jpg
[MjP6D.jpg]: https://i.stack.imgur.com/MjP6D.jpg
[div_ Floated left resulting in _section_ moving into remaining space]: http://jsfiddle.net/N82UD/
[Floated _div_ cleared so that the _section_ tag will render below the floated _div_ s]: http://jsfiddle.net/N82UD/1/
[urCUS.jpg]: https://i.stack.imgur.com/urCUS.jpg
[HNB63.jpg]: https://i.stack.imgur.com/HNB63.jpg
[Elky]: https://stackoverflow.com/a/25343280/1542290
[Clearfix]: https://i.stack.imgur.com/x9D1Y.png
[pseudo element here]: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
[IE8 supports _after_ pseudo]: http://caniuse.com/css-gencontent
[CSS float and clear]: http://css-tricks.com/all-about-floats/
[Sample Fiddle]: http://jsfiddle.net/YKDBv/
[clearfix]: https://stackoverflow.com/questions/8554043/what-is-clearfix
[clear]: http://www.w3.org/TR/CSS2/visuren.html#flow-control