因CSS很多布局是需要浮动的，当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，为了使float后面的元素不被float浮动层的影响，我们就需要用clear:both;来清除。比如下面的例子：
<p style="float:left;width:200px;">第1列，</p> <p style="float:left;width:400px;">第2列，</p> <p style="clear:both;">第3列。</p>
如果没有清除浮动，那么第3列文字就会和第1、2列文字连在一起 ，所以需要在第3个列上加入清除浮动的代码。
一般情况下，我们会为清除浮动专门定义一个CSS类，用时候直接引用，这样更方便，比如：
<style>
.clear {clear: both;}
</style>
<!--以下为调用方法-->
<div class="clear"></div>
<!--比如上面的例子可以写成：-->
<p style="float:left;width:200px;">第1列，</p>
<p style="float:left;width:400px;">第2列，</p>
<div class="clear"></div>
<p>第3列。</p>因为IE和火狐存在兼容性问题，所以有时候这样定义清除浮动会在不同浏览下效果会不同，IE也说的过去，在火狐下或许就不灵了，下面给出一个经过调试的CSS清除浮动代码，供参考：
.clear {
clear: both;
height:1px;
margin-top:-1px;
overflow:hidden;
}清除浮动一般是在外层Div结束前，如果放在结束后，则无效。
