CSS清除浮动——CSS实验室

点击下面的按钮就可以回复上一节的样式设置状态：两个内部div都是左侧浮动。（建议暂时不要点）

代码结构如下：

<div id="d">
 <div id="d2">
……
 </div>
 <div id="d3">
……
 </div>
</div>

可以看到，两个div的浮动设置导致下面的内容“窜”到了浮动后留下的空隙里，造成文字的可读性很差，这恐怕不是我们希望的效果。怎么办呢？clear清除浮动。

CSS清楚浮动，clear

CSS中的clear属性的意思是，不要让我边上有浮动的东西。该属性的属性值可以是：left、right、both、none，意思分别是：左侧不能有浮动元素；右侧不能有浮动元素；两侧都不能有浮动元素；不清除浮动。

在上一节中我们设置了两个内部div都为左侧浮动，现在我们就让后面的元素设置清楚左侧浮动属性。注意：清楚属性是设置给紧跟浮动元素之后的元素上。
clear:left;

可以看到，设置了清除浮动属性之后，“窜”上去的文字又回到正常的位置了。这就是清楚浮动的作用。