clear both

Posted 2020-07-05

原文地址：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结束前，如果放在结束后，则无效。