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

CSS

梅古一小卤蛋

2020-03-23

以下CSS规则有什么作用：

.clear { clear: both; }

为什么我们需要使用它？

第2982篇《CSS规则“清除：两者”有什么作用？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答

神无小宇宙 2020.03.23

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

小小 2020.03.23

如果要将一个元素放在另一个元素的底部，则可以在CSS中使用此代码。它用于浮子。

如果您浮动内容，则可以向左或向右浮动...因此，在常见的布局中，您可能会有一个左导航，一个内容div和一个页脚。

为了确保页脚停留在这两个浮点的下方（如果您左右浮动），则将页脚设为clear: both。

这样，它将保持在两个浮点以下。

（如果您只需要清除，则只需要清除即可clear: left;。）

完成本教程：

猴子 2020.03.23

CSS浮动和清除

样品小提琴

只需尝试clear:both从divwith中删除属性，class sample然后查看其在float之后的状态divs。

飞云 2020.03.23

Alien先生的回答是完美的，但是无论如何我都不建议使用，<div class="clear"></div>因为这只是使您的标记变脏的黑客手段。div就不良的结构和语义而言，这是无用的空白，这也使您的代码不灵活。在某些浏览器中，该div导致额外的高度，您必须添加更高的高度height: 0;。但是，当您想在浮动元素周围添加背景或边框时，真正的麻烦就开始了，因为网络设计不当，它只会崩溃。我建议将浮动元素包装到具有clearfix CSS规则的容器中。这也是一种技巧，但是很漂亮，使用起来更灵活，并且对人类和SEO机器人可读。