CSS浮动和清除

样本小提琴

只是试着从div中删除clear:both属性和类sample，看看它是如何跟随浮动div的。

当你想把一个元素放在另一个元素的底部时，你可以在CSS中使用这段代码。 它用于浮动。

如果你浮动内容，你可以向左或向右浮动…所以在一个常见的布局中，你可能有一个左侧导航，一个内容div和一个页脚。

为了确保页脚保持在这两个浮动(如果你向左和向右浮动)下面，然后你把页脚设置为clear: both。

这样它将保持在两个浮动的下方。

(如果你只清除左边，那么你只需要清除:left;)

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 div in 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 clearfix CSS rule. This is hack as well, but beautiful, more flexible to use and readable for human and SEO robots.

我不会在这里详细解释浮动是如何工作的，因为这个问题通常集中在为什么使用clear: both;或什么是明确的:两者;完全做……

我会让这个答案简单明了，直截了当，并向你们清晰地解释为什么:两者;是必须的，或者它做什么…

通常，设计师会将元素向左或向右浮动，从而在另一侧创造出一个空白空间，让其他元素占据剩余的空间。

为什么它们是浮动元素?

当设计人员需要两个并排的块级元素时，元素是浮动的。例如，我们想要设计一个基本的网站，它的布局如下…

演示图像的实时示例。

演示代码

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

注意:你可能需要添加页眉，页脚，aside, section(和其他HTML5元素)作为display: block;在样式表中显式地提到元素是块级元素。

解释:

我有一个基本的布局，1页眉，1侧栏，1内容区和1页脚。

标题没有浮动，接下来是aside标签，我将用于我的网站边栏，所以我将浮动元素到左边。

注意:默认情况下，块级元素占文档宽度的100%， 但当向左或向右浮动时，它将根据 它所包含的内容。

块级元素的正常行为 块级元素的浮动行为

正如你所注意到的，左边浮动的div没有使用它右边的空间，这将允许它后面的div在剩余的空间中移动。

div如果没有被浮动，就会一个接一个地渲染 如果向左或向右浮动，Div将相互移位

这就是块级元素左漂或右漂时的行为，原因很清楚了，都是;必须的，为什么?

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

我正在使用一个名为.clear的类，它拥有一个名为clear的属性，值为两者。我们来看看为什么两者都需要。

我把section元素移到左边，假设有这样一个场景，我们有一个池，header是固态土地，aside和section是漂浮在池中，footer也是固态土地，就像这样。

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

文档的正常流程 向左浮动的部分 清除浮动元素以拉伸容器的背景颜色

(请参考这个答案的[Clearfix]部分，以获得简洁的方法。为了解释，我故意使用了一个空的div示例)

我上面提供了3个例子，第一个是正常的文档流，其中红色背景将只是渲染预期，因为容器不持有任何浮动对象。

在第二个例子中，当对象被向左浮动时，容器元素(POOL)将不知道被浮动元素的尺寸，因此它不会延伸到被浮动元素的高度。

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

另一个原因明确:两者皆有;使用的是防止元素在剩余空间中向上移位。

假设你想要两个元素并排，另一个元素在它们下面……你将两个元素向左浮动另一个元素在它们下面。

div向左浮动，导致section移动到剩余空间 浮动div被清除，因此section标签将在浮动div下面呈现

---

1例

---

第二个例子

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

---

Clearfix

接下来是clearfix，它与浮动有关。正如@Elky已经指定的那样，我们清除这些浮动的方式不是一种干净的方式，因为我们使用的是一个空div元素，而不是一个div元素的意思。因此，这里出现了明确的修正。

可以把它看作是一个虚拟元素，它将在父元素结束之前为您创建一个空元素。这将自动清除包含浮动元素的包装器元素。这个元素并不存在于你的DOM中，但是它会起作用。

要自清除任何具有浮动元素的包装器元素，可以使用

.wrapper_having_floated_elements:after {  /* Imaginary class name */
  content: "";
  clear: both;
  display: table;
}

注意:after伪元素被我用于那个类。这将在包装器元素关闭之前为它创建一个虚拟元素。如果我们查看dom，你可以看到它是如何在文档树中显示的。

你看，它是在被浮动的子div之后被渲染的这里我们清除了浮点数这就相当于有了一个空div元素clear: both;属性，我们也在这里使用。为什么是display: table;内容不在此回答范围内，但您可以在这里了解更多关于伪元素的信息。

注意，这在IE8中也可以工作，因为IE8支持:after pseudo。

---

最初的回答:

大多数开发者将内容向左或向右浮动在页面上，可能是带有logo，侧边栏，内容等的div，这些div会向左或向右浮动，留下剩余空间未使用，因此如果你放置其他容器，它也会在剩余空间中浮动，所以为了防止清除:两者;，则清除向左或向右浮动的所有元素。

演示:

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

CSS浮动和清除

样本小提琴

只是试着从div中删除clear:both属性和类sample，看看它是如何跟随浮动div的。

clear属性表示在同一块格式化上下文中，元素的左侧、右侧或两侧不能与之前的浮动元素相邻。被清除的元素被推到相应的被浮动元素下面。例子:

明确:没有;元素保持与被浮动元素相邻

身体{ 字体类型:等宽字体; 背景:# EEE; ｝ .float-left { 浮:左; 宽度:60 px; 高度:60 px; 背景:#欧共体语言教学大纲; ｝ .float-right { 浮:正确; 宽度:60 px; 高度:60 px; 背景:#欧共体语言教学大纲; ｝ .clear-none { 明确:没有; 背景:# FFF; ｝ <div class="float-left">float: left <div class="float-right">float: right <div class="clear-none">clear: none

明确:左;元素被推到左浮动元素下面

身体{ 字体类型:等宽字体; 背景:# EEE; ｝ .float-left { 浮:左; 宽度:60 px; 高度:60 px; 背景:#欧共体语言教学大纲; ｝ .float-right { 浮:正确; 宽度:60 px; 身高:120 px; 背景:#欧共体语言教学大纲; ｝ .clear-left { 明确:左; 背景:# FFF; ｝ <div class="float-left">float: left <div class="float-right">float: right <div class="clear-left">clear: left

明确:正确的;元素被推到右下浮动的元素

身体{ 字体类型:等宽字体; 背景:# EEE; ｝ .float-left { 浮:左; 宽度:60 px; 身高:120 px; 背景:#欧共体语言教学大纲; ｝ .float-right { 浮:正确; 宽度:60 px; 高度:60 px; 背景:#欧共体语言教学大纲; ｝ .clear-right { 明确:正确的; 背景:# FFF; ｝ <div class="float-left">float: left <div class="float-right">float: right <div class="clear-right">clear: right

明确:;元素被推到所有被浮动元素之下

身体{ 字体类型:等宽字体; 背景:# EEE; ｝ .float-left { 浮:左; 宽度:60 px; 高度:60 px; 背景:#欧共体语言教学大纲; ｝ .float-right { 浮:正确; 宽度:60 px; 高度:60 px; 背景:#欧共体语言教学大纲; ｝ .clear-both { 明确:; 背景:# FFF; ｝ <div class="float-left">float: left <div class="float-right">float: right <div class="clear-both">clear: both

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>