CSS清除浮动常用方法小结

本文转自：http://www.cnblogs.com/fengzheng126/archive/2012/05/19/2508778.html

http://www.divcss5.com/rumen/r424.shtml

常用的清除浮动的方法有以下三种:

此为未清除浮动源代码，运行代码无法查看到父级元素浅黄色背景。

<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>

三种清除浮动方法如下：

1、使用空标签清除浮动。我用了很久的一种方法，空标签可以是div标签，也可以是P标签。我习惯用<P>，够简短，也有很多人用<hr>，只是需要另外 为其清除边框，但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代 码：clear:both。此方法的弊端在于增加了无意义的结构元素。

对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的 做法。至于使用<br />元素还是空<div></div>可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的 是，<br />本身是有表现的，它会多出一个换行出来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空<div>比较合 适。

 

<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
.clr{clear:both;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
<p class=”clr”> </p>
</div>

 

2、使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6,也可以用width:100%。

不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面；

<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1; }/* overflow:auto可以换成overflow:hidden，zoom:1可以换成width:100%*/
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>

3、使用after伪对象清除浮动。 该方法只适用于非IE浏览器 。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像 素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。

<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>

CSS clear both清除浮动

1、clear语法：
clear : none | left|right| both 

2、clear参数值说明：
none : 　允许两边都可以有浮动对象
both : 　不允许有浮动对象
left : 　不允许左边有浮动对象
right : 　不允许右边有浮动对象

3、clear解释：
该属性的值指出了不允许有浮动对象的边情况，又对象左边不允许有浮动、右边不允许有浮动、不允许有浮动对象。

4、css结构
div{clear:left}
div{clear:right}
div{clear:both}

5、div clear常用地方

我们常常用于使用了float css样式后产生浮动，最常用是使用clear:both清除浮动。比如一个大对象内有2个小对象使用了css float样式为了避免产生浮动，大对象背景或边框不能正确显示，这个时候我们就需要clear:both清除浮动。

如果内div是浮动的，一般都需要clear浮动，不然的话内div会超出外div的框架

案例

css:

<span style="font-size:18px;">.divcss5{width:500px;background:#000;border:1px solid #F00;padding:10px} 
.divcss5_left,.divcss5_right{ 
border:1px solid #FFF;background:#999;width:200px;height:150px 
} 
/* css注释： 这里为了截图分别，对css代码换行 */ 
.divcss5_left{ float:left}/* css注释： 设置浮动靠左 */ 
.divcss5_right{ float:right}/* css注释：设置浮动靠右 */ \</span>

html:

<div class="divcss5"> 
    <div class="divcss5_left">float left盒子</div> 
    <div class="divcss5_right">float right盒子</div> 
</div> 

案例效果截图

这个时候需要clear来清除浮动，让“divcss5”盒子撑开。

我们在css代码中加入CSS代码：

.clear{ clear:both} 

html代码中“.divcss5”盒子</div> 结束标签前加入代码：

<div class="clear"></div> 

最终案例效果截图