实例解析清除CSS float浮动的三种方法-css浮动属性float详解

本文向大家描述一下清除CSS float浮动的方法，主要包括使用空标签清除浮动，使用overflow属性，使用after伪对象清除浮动三种，希望本文介绍对你有所帮助。

清除浮动的三种方法

先看一下下面代码：

viewsourceprint?

01<style> 
 
02*{margin:0;padding:0;font-size:14px;}  
 
03ul.nav{background:red;list-style:none;}  
 
04ul.navli{float:left;background:#FF9;margin:2px5px;}  
 
05p{background:blue;color:#FFF;}  
 
06</style> 
 
07  
 
08<ulclassulclass="nav"> 
 
09  
 
10<li>首页</li> 
 
11  
 
12<li>我的日志</li> 
 
13  
 
14<li>我的相册</li> 
 
15  
 
16<li>我的心情</li> 
 
17  
 
18<li>个人中心</li> 
 
19  
 
20</ul> 
 
21  
 
22<p>这里不是导航的内容</p>

页面显示如下：

如何解决以上问题呢？唯一的办法就是清除浮动。#p#

清除浮动的方法

◆使用空标签清除浮动

在需要清楚浮动的层里边添加：<divstyle="clear:both"></div>或者<brstyle="clear"/>

viewsourceprint?

1<ULclassULclass=nav> 
 
2<LI>首页  
 
3<LI>我的日志  
 
4<LI>我的相册  
 
5<LI>我的心情  
 
6<LI>个人中心  
 
7<BRstyleBRstyle="CLEAR:both"> 
 
8</LI></UL>

◆使用overflow属性

此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可!overflow:auto;是让高度自适应，zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决，注意，zoom不符合W3C标准。overflow:hidden也可以实现。

viewsourceprint?

1<ULclassULclass=navstyle="OVERFLOW:auto;ZOOM:1"> 
 
2<LI>首页  
 
3<LI>我的日志  
 
4<LI>我的相册  
 
5<LI>我的心情  
 
6<LI>个人中心  
 
7</LI></UL>

◆使用after伪对象清除浮动

after伪对象非IE浏览器支持，所以并不影响到IE/WIN浏览器。具体写法可参照以下示例。使用中需注意以下几点。

一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；

二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为"."，但我发现为空亦是可以的。

viewsourceprint?

1ul.nav:after{display:block;clear:both;content:"";  
visibility:hidden;height:0;}

◆清除浮动后效果如下：

使用一下代码清除浮动，屡试不爽。

viewsourceprint?

1.clearfix:after{content:".";display:block;height:0;
clear:both;visibility:hidden;}  
 
2.clearfix{display:inline-block;}  
 
3.clearfix{display:block;}

【编辑推荐】