clear both

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了clear both相关的知识,希望对你有一定的参考价值。

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

以上是关于clear both的主要内容,如果未能解决你的问题,请参考以下文章

clear both

清除浮动clear:both的应用详解

clear:both的用法

clear:both的用法

clear:both;和overflow:hidden;的应用理解。

对 clear:both 这个样式的一些理解