本文向大家描述一下清除CSS float浮動(dòng)的方法，主要包括使用空標(biāo)簽清除浮動(dòng)，使用overflow屬性，使用after偽對象清除浮動(dòng)三種，希望本文介紹對你有所幫助。

清除浮動(dòng)的三種方法

先看一下下面代碼：

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>個(gè)人中心</li> 
 
19  
 
20</ul> 
 
21  
 
22<p>這里不是導(dǎo)航的內(nèi)容</p> 
 

 頁面顯示如下：

如何解決以上問題呢？唯一的辦法就是清除浮動(dòng)。#p#

清除浮動(dòng)的方法

◆使用空標(biāo)簽清除浮動(dòng)

在需要清楚浮動(dòng)的層里邊添加：<divstyle="clear:both"></div>或者<brstyle="clear"/>

viewsourceprint?

1<ULclassULclass=nav> 
 
2<LI>首頁  
 
3<LI>我的日志  
 
4<LI>我的相冊  
 
5<LI>我的心情  
 
6<LI>個(gè)人中心  
 
7<BRstyleBRstyle="CLEAR:both"> 
 
8</LI></UL> 
 

 ◆使用overflow屬性

此方法有效地解決了通過空標(biāo)簽元素清除浮動(dòng)而不得不增加無意代碼的弊端。使用該方法是只需在需要清除浮動(dòng)的元素中定義CSS屬性：overflow:auto，即可!overflow:auto;是讓高度自適應(yīng)，zoom:1;是為了兼容IE6，也可以用height:1%;的方式來解決，注意，zoom不符合W3C標(biāo)準(zhǔn)。overflow:hidden也可以實(shí)現(xiàn)。

viewsourceprint?

1<ULclassULclass=navstyle="OVERFLOW:auto;ZOOM:1"> 
 
2<LI>首頁  
 
3<LI>我的日志  
 
4<LI>我的相冊  
 
5<LI>我的心情  
 
6<LI>個(gè)人中心  
 
7</LI></UL> 
 

 ◆使用after偽對象清除浮動(dòng)

after偽對象非IE瀏覽器支持，所以并不影響到IE/WIN瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點(diǎn)。

一、該方法中必須為需要清除浮動(dòng)元素的偽對象中設(shè)置height:0，否則該元素會(huì)比實(shí)際高出若干像素；

二、content屬性是必須的，但其值可以為空，藍(lán)色理想討論該方法的時(shí)候content屬性的值設(shè)為"."，但我發(fā)現(xiàn)為空亦是可以的。

viewsourceprint?

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

◆清除浮動(dòng)后效果如下：

使用一下代碼清除浮動(dòng)，屢試不爽。

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代碼整理及優(yōu)化七大原則
5. 深入剖析Firefox下 margin-top失效原因與解決方案