本文向大家描述一下清除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;}  
 

【編輯推薦】

1. CSS中overflow屬性使用技巧
2. CSS Sprites樣式生成工具用法詳解
3. FireFox和IE中CSS兼容技巧匯總
4. CSS代碼整理及優化七大原則
5. 深入剖析Firefox下 margin-top失效原因與解決方案