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