重慶網(wǎng)絡(luò )公司浮動(dòng)是CSS布局中最常用的屬性，然而浮動(dòng)是脫離標準流（也稱(chēng)文檔流）的，如果不清除浮動(dòng)的話(huà)，會(huì )對周?chē)脑禺a(chǎn)生影響。也正是浮動(dòng)脫離標準流這一特性，使浮動(dòng)成為CSS布局的難點(diǎn)之一。

清除浮動(dòng)有好一些方法，但兼容各種瀏覽器的方法卻不多。下面我就介紹三個(gè)比較有效的兼容的方法，這三個(gè)方法也見(jiàn)證了我用CSS布局的幾個(gè)階段吧。這三個(gè)方法中的某種方法可能你也在用，如果你對那種方法很熟悉了可以直接54。

我們以下面的XHTML代碼為例來(lái)說(shuō)明這三種方法的用法：

<div id="box">

<div id="sidebar"></div>

<div id="main"></div>

</div>

1、額外標簽

這是我一開(kāi)始使用的方法。這種方法是在浮動(dòng)元素的最后加一個(gè)標簽，用這個(gè)標簽清除浮動(dòng)，一般是加div：<div class="clear"></div>，當然也可以是其他標簽，比如p、br等。本例加在<div id="main"></div>的后面。對應的CSS代碼：

#box{

width:500px;

margin:10px auto;

background:#ccc;

}

#sidebar{

width:190px;

height:500px;

float:left;

background:#f00;

}

#main{

width:300px;

height:500px;

float:right;

background:#00f;

}

.clear{

clear:both;

}

點(diǎn)擊這查看效果

.clear有必要的時(shí)候可以這么寫(xiě)：

.clear{

clear:both;

height:0;

line-height:0;

font-size:0;

}

因為在IE6下，會(huì )出現沒(méi)有內容的div仍有一定的高度情況（大概是12px吧，具體不太清楚，沒(méi)有具體研究）。

我給每個(gè)盒子都加了背景顏色，這樣能清楚的看到各個(gè)盒子的范圍和#box是否包含了#sidebar和#main。

優(yōu)點(diǎn)：直接，W3C推薦。

缺點(diǎn)：添加了無(wú)語(yǔ)意的標簽，破壞了XHTML代碼的良好結構，對搜索引擎也無(wú)用。如果不看效果圖的話(huà)，可能不知道要把這個(gè)額外標簽加到什么地方（當然這種情況比較少，現在一般都先畫(huà)出原，而且也可以根據命名來(lái)判斷），如果以后要改版，處理這些額外的標簽會(huì )是一個(gè)麻煩。

有一篇文章《br玩轉清除浮動(dòng)》，性質(zhì)和這種方法是一樣的，有興趣的可以搜索一下。

2、父元素浮動(dòng)

了解到第一種方法有比較多缺點(diǎn)之后，我選擇了這種方法。

這種方法就是把浮動(dòng)元素的父元素也設浮動(dòng)屬性。比如上面的#box也設浮動(dòng)float:left，float:right也可以，具體的代碼是：

#box{

width:500px;

margin:10px auto;

float:left;

background:#ccc;

}

#sidebar{

width:190px;

height:500px;

float:left;

background:#f00;

}

#main{

width:300px;

height:500px;

float:right;

background:#00f;

}

點(diǎn)擊這里查看效果

查看效果發(fā)現沒(méi)有居中，是的，#box已經(jīng)向左浮動(dòng)了。我們改寫(xiě)一下#box的CSS代碼，讓他能夠居中：

#box{

width:500px;

margin:10px auto;

float:left;

position:relative;

left:50%;

margin-left:-250px;

background:#ccc;

}

點(diǎn)擊這里查看效果

現在居中了。

優(yōu)點(diǎn)：無(wú)需添加無(wú)語(yǔ)意標簽。

缺點(diǎn)：需要給父元定義寬度，浮動(dòng)元素太多，控制不好很麻煩。。。

3、overflow:hidden

這種方法是前段時(shí)間偶然在網(wǎng)上發(fā)現的，我目前正在使用次方法。這種方法是給父元素加overflow:hidden屬性，為了兼容IE6，這個(gè)父元素也要加上合適的寬度。但由于不再是浮動(dòng)，所以不會(huì )對周?chē)脑禺a(chǎn)生影響。對應上面XHTML代碼的CSS代碼是：

#box{

width:500px;

margin:10 auto;

overflow:hidden;

background:#ccc;

}

#sidebar{

width:190px;

height:500px;

float:left;

background:#f00;

}

#main{

width:300px;

height:500px;

float:right;

background:#00f;

}

點(diǎn)擊這里查看效果

查看效果也沒(méi)有居中， 我們還是用改寫(xiě)一下#box，點(diǎn)擊這里查看改寫(xiě)后的效果。

優(yōu)點(diǎn)：容易控制。

缺點(diǎn)：暫未發(fā)現。。。