当前位置：theitroad>CSS 规则“clear: both”有什么作用？

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

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/12871710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 20:29:25 　来源:igfitidea点击:

What does the CSS rule "clear: both" do?

csscss-float

提问by Mr. Alien

What does the following CSS rule do:

以下 CSS 规则有什么作用：

.clear { clear: both; }

And why do we need to use it?

为什么我们需要使用它？

回答by Mr. Alien

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;或究竟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...

我将保持这个答案简单，切中要害，并将以图形方式向您解释为什么clear: both;需要它或它做什么......

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. For example say we want to design a basic website which has a layout like below...

当设计者需要 2 个并排的块级元素时，元素会浮动。例如，假设我们要设计一个基本的网站，其布局如下...

enter image description here

在此处输入图片说明

Live Exampleof the demo image.

演示图像的实时示例。

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

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.

注意：您可能需要像在样式表中一样添加header, footer, aside, section（和其他 HTML5 元素）display: block;以明确指出这些元素是块级元素。

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 asidetag 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
  2. Floated Behavior Of Block Level Element
  1. 块级元素的正常行为
  2. 块级元素的浮动行为

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

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

  1. div's will render one after the other if they are NOT floated
  2. divwill shift beside each other if floated left or right
  1. div如果它们没有浮动，将一个接一个地呈现
  2. div如果向左或向右浮动，将彼此并排移动

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

好的，这就是块级元素在向左或向右浮动时的行为方式，那么现在为什么clear: both;需要，为什么？

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

所以如果你在布局演示中注意到 - 如果你忘记了，这里是..

I am using a class called .clearand it holds a property called clearwith a value of both. So lets see why it needs both.

我使用的是所谓的类.clear，它拥有一个名为属性clear与值both。所以让我们看看为什么它需要both.

I've floated asideand sectionelements to the left, so assume a scenario, where we have a pool, where headeris solid land, asideand sectionare floating in the pool and footer is solid land again, something like this..

我已经漂浮aside和section元素的左侧，所以假设一个场景，在这里我们有一个游泳池，那里header是坚实的土地，aside并section在泳池漂浮和页脚再次坚实的土地，这样的事情..

Floated View

浮动视图

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 POOLhere and the POOLhas no idea how many objects are floating, or what the length or breadth of the floated elements are, so it simply won't stretch.

所以蓝水不知道浮动元素的面积是多少，它们可以比水池大也可以更小，所以这里出现了一个困扰90%CSS初学者的常见问题：为什么容器元素的背景没有被拉伸当它持有浮动元素时。这是因为这里的容器元素是一个POOL，而POOL不知道有多少个对象是浮动的，或者浮动元素的长度或宽度是多少，所以它根本不会拉伸。

  1. Normal Flow Of The Document
  2. Sections Floated To Left
  3. Cleared Floated Elements To Stretch Background Color Of The Container
  1. 文件的正常流程
  2. 部分浮动到左侧
  3. 清除浮动元素以拉伸容器的背景颜色

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

（请参阅此答案的[Clearfix]部分以了解执行此操作的巧妙方法。我div有意使用一个空示例进行解释）

I've provided 3 examples above, 1st is the normal document flow where redbackground 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) 不会知道浮动元素的尺寸，因此它不会拉伸到浮动元素的高度。

enter image description here

在此处输入图片说明

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

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

enter image description here

在此处输入图片说明

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

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

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. divFloated left resulting in sectionmoving into remaining space
  2. Floated divcleared so that the sectiontag will render below the floated divs
  1. div向左浮动导致section移动到剩余空间
  2. Floated 已div清除，以便section标记将呈现在浮动divs下方

1st Example

第一个例子

enter image description here

在此处输入图片说明

2nd Example

第二个例子

enter image description here

在此处输入图片说明

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

最后但并非最不重要的是，footer标签将在浮动元素之后呈现，因为我clear在声明我的footer标签之前使用了类，这确保所有浮动元素（左/右）都被清除到那个点。

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 divelement which is not a divelement is meant for. Hence here comes the clearfix.

来到与浮动相关的 clearfix。正如@Elky已经指定的那样，我们清除这些浮点数的方式并不是一种干净的方式，因为我们使用的div是一个不是div元素的空元素。因此这里来了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 :afterpseudo 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.

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

Clearfix

清除修复

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

因此，如果您看到，它是在浮动子项之后呈现的div，我们清除浮动子项，这只不过是等效于具有我们正在使用的属性的空div元素clear: both;。现在为什么display: table;和content超出了这个答案范围，但您可以在此处了解有关伪元素的更多信息。

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

请注意，这也适用于 IE8，因为IE8 支持:after伪.

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;is used, it clears all the elements floated left or right.

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

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;so it will ensure you clear all floats, left or right

现在，如果你想让另一个 div 呈现在下面div1，那么你将使用clear: both;它来确保你清除所有浮动，向左或向右

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

回答by Salman A

The clearproperty 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. Cleared elements are pushed below the corresponding floated elements. Examples:

该clear属性表示元素的左侧、右侧或两侧不能与同一块格式上下文中较早的浮动元素相邻。清除的元素被推到相应的浮动元素下方。例子：

clear: none;Element remains adjacent to floated elements

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;Element pushed below left floated elements

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;Element pushed below right floated elements

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;Element pushed below all floated elements

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>

cleardoes 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>

回答by Priyank Patel

CSS float and clear

CSS浮动和清除

Sample Fiddle

样品小提琴

Just try to remove clear:bothproperty from the divwith classsampleand see how it follows floating divs.

只需尝试clear:both从divwith 中删除属性classsample，看看它是如何跟随浮动的divs。

回答by elky

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. This is useless empty divin terms of bad structure and semantic, this also makes your code not flexible. In some browsers this div causes additional height and you have to add 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. I do recommend to wrap floated elements into container which has clearfixCSS rule. This is hack as well, but beautiful, more flexible to use and readable for human and SEO robots.

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

回答by Saeed

When you want one element placed at the bottom other element you use this code in CSS. It is used for floats.

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

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:

通过本教程：

相关推荐

IE8 css 选择器

IE8 css 选择器

CSS 文字装饰下划线颜色

CSS 文字装饰下划线颜色

CSS 用徽标图像替换 H1 文本：搜索引擎优化和可访问性的最佳方法？

CSS 用徽标图像替换 H1 文本：搜索引擎优化和可访问性的最佳方法？

CSS CSS中的点是什么意思？

CSS CSS中的点是什么意思？

相关推荐
最近更新
标签