以下 CSS 规则有什么作用：
.clear { clear: both; }
为什么我们需要使用它？
user1708560
问问题
197567 次
5 回答
698
我不会在这里（详细）解释浮点数是如何工作的，因为这个问题通常集中在为什么使用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% 的宽度，但是当向左或向右浮动时，它会根据它所持有的内容调整大小。
因此，正如您所注意到的，左侧浮动的左侧div空间未使用，这将允许其div在剩余空间中移动。
好的，这就是块级元素在向左或向右浮动时的行为方式，那么现在为什么clear: both;需要，为什么？
因此，如果您在布局演示中记下 - 万一您忘记了，这里就是..
我正在使用一个名为的类.clear，它拥有一个名为的属性clear，其值为both. 所以让我们看看它为什么需要both.
我已经漂浮aside并且section元素向左，所以假设一个场景，我们有一个水池，那里header是实心土地，aside并且section漂浮在水池中并且页脚再次是实心土地，就像这样......
所以蓝水不知道浮动元素的面积是多少，可以比水池大，也可以比水池小，所以90%的CSS初学者都会遇到一个常见的问题：为什么容器元素的背景没有被拉伸当它包含浮动元素时。这是因为容器元素在这里是一个POOL ，而POOL不知道有多少对象是浮动的，也不知道浮动元素的长度或宽度是多少，所以它根本不会拉伸。
（请参阅此答案的[Clearfix]部分以获得巧妙的方法。我div故意使用一个空示例进行解释）
我在上面提供了 3 个示例，第一个是正常的文档流，其中red背景将按预期呈现，因为容器不包含任何浮动对象。
在第二个示例中，当对象向左浮动时，容器元素 (POOL) 将不知道浮动元素的尺寸，因此它不会拉伸到浮动元素的高度。
使用后clear: both;，容器元素将被拉伸到其浮动元素尺寸。
使用的另一个原因clear: both;是防止元素在剩余空间中向上移动。
假设您想要 2 个并排的元素和它们下方的另一个元素......所以您将向左浮动 2 个元素，并且您想要在它们下方的另一个元素。
第一个例子
第二个例子
最后但并非最不重要的一点是，footer标签将在浮动元素之后呈现，因为我clear在声明标签之前使用了该类footer，这确保了所有浮动元素（左/右）都被清除到该点。
清除修复
来到与浮动有关的 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 支持:afterpseudo。
原答案：
大多数开发人员在他们的页面上向左或向右浮动他们的内容，可能是带有徽标、侧边栏、内容等的 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
----------------------------------
于 2012-10-13T09:20:48.083 回答
46
该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>于 2014-11-22T21:33:54.223 回答
15
2
当您希望将一个元素放置在另一个元素的底部时，您可以在 CSS 中使用此代码。它用于浮动。
如果你浮动内容，你可以向左或向右浮动......所以在一个常见的布局中，你可能有一个左导航、一个内容 div 和一个页脚。
为了确保页脚保持在这两个浮动下方（如果您左右浮动），那么您将页脚设置为clear: both.
这样，它将保持在两个浮子下方。
（如果你只清理左边那么你真的只需要clear: left;。）
浏览本教程：
于 2012-10-13T09:18:58.993 回答