CSS规则"清楚:两者"有什么作用？

Question

以下CSS规则的作用是什么:

.clear { clear: both; }

为什么我们需要使用它？

Answer 1

我不会解释花车如何工作(详细),因为这个问题一般侧重于为什么使用clear: both;或者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在剩余空间中移动.

1. div如果它们没有浮动,它们会一个接一个地渲染
2. div 如果向左或向右浮动,它们将彼此相邻移动

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

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

我正在使用一个名为的类.clear,它包含一个名为clearvalue的属性both.所以让我们看看为什么需要它both.

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

所以蓝水不知道浮动元素的区域是什么,它们可以比池大或更小,所以这里有一个常见的问题,它使90%的CSS初学者感到困扰:为什么容器元素的背景没有被拉伸当它拥有浮动的元素.这是因为容器元素在这里是POOL,并且POOL不知道有多少对象浮动,或浮动元素的长度或宽度是什么,所以它根本不会拉伸.

1. 文件的正常流程
2. 部分向左浮动
3. 清除浮动的元素,以拉伸容器的背景颜色

(请参阅本答案的^[Clearfix]部分,以便巧妙地进行此操作.我将div故意使用一个空的示例进行说明)

我上面提供了3个例子,第1个是普通的文档流程,其中red背景将按预期呈现,因为容器不包含任何浮动对象.

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

使用后clear: both;,容器元件将被拉伸至其浮动元件尺寸.

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

假设您想要并排2个元素,而另一个元素位于它们下面...所以你将2个元素向左浮动,你想要另一个元素在它们下面.

1. div向左浮动,导致section进入剩余空间
2. 浮动div清除,以便section标记将在浮动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超出了这个答案范围,但你可以在这里了解更多关于伪元素的信息.

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

原答案:

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

示范:

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

现在如果你想在下面制作另一个div渲染div1,那么你将使用clear: both;它,这将确保你清除所有浮动,左或右

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

Answer 2

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

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; 元素被推到左浮动元素下方

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; 元素被推到右浮动元素下方

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; 元素被推到所有浮动元素下方

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>

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>

Answer 3

CSS浮动并清除

样品小提琴

只是尝试clear:both从divwith中删除属性class sample,看看它是如何浮动的divs.

Answer 4

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