重慶網(wǎng)絡(luò)公司浮動是CSS布局中最常用的屬性，然而浮動是脫離標準流（也稱文檔流）的，如果不清除浮動的話，會對周圍的元素產(chǎn)生影響。也正是浮動脫離標準流這一特性，使浮動成為CSS布局的難點之一。
清除浮動有好一些方法，但兼容各種瀏覽器的方法卻不多。下面我就介紹三個比較有效的兼容的方法，這三個方法也見證了我用CSS布局的幾個階段吧。這三個方法中的某種方法可能你也在用，如果你對那種方法很熟悉了可以直接54。
我們以下面的XHTML代碼為例來說明這三種方法的用法：
<div id="box">
<div id="sidebar"></div>
<div id="main"></div>
</div>
1、額外標簽
這是我一開始使用的方法。這種方法是在浮動元素的最后加一個標簽，用這個標簽清除浮動，一般是加div：<div class="clear"></div>，當然也可以是其他標簽，比如p、br等。本例加在<div id="main"></div>的后面。對應(yīng)的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;
}
點擊這查看效果
.clear有必要的時候可以這么寫：
.clear{
clear:both;
height:0;
line-height:0;
font-size:0;
}
因為在IE6下，會出現(xiàn)沒有內(nèi)容的div仍有一定的高度情況（大概是12px吧，具體不太清楚，沒有具體研究）。
我給每個盒子都加了背景顏色，這樣能清楚的看到各個盒子的范圍和#box是否包含了#sidebar和#main。
優(yōu)點：直接，W3C推薦。
缺點：添加了無語意的標簽，破壞了XHTML代碼的良好結(jié)構(gòu)，對搜索引擎也無用。如果不看效果圖的話，可能不知道要把這個額外標簽加到什么地方（當然這種情況比較少，現(xiàn)在一般都先畫出原，而且也可以根據(jù)命名來判斷），如果以后要改版，處理這些額外的標簽會是一個麻煩。
有一篇文章《br玩轉(zhuǎn)清除浮動》，性質(zhì)和這種方法是一樣的，有興趣的可以搜索一下。
2、父元素浮動
了解到第一種方法有比較多缺點之后，我選擇了這種方法。
這種方法就是把浮動元素的父元素也設(shè)浮動屬性。比如上面的#box也設(shè)浮動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;
}
點擊這里查看效果
查看效果發(fā)現(xiàn)沒有居中，是的，#box已經(jīng)向左浮動了。我們改寫一下#box的CSS代碼，讓他能夠居中：
#box{
width:500px;
margin:10px auto;
float:left;
position:relative;
left:50%;
margin-left:-250px;
background:#ccc;
}
點擊這里查看效果
現(xiàn)在居中了。
優(yōu)點：無需添加無語意標簽。
缺點：需要給父元定義寬度，浮動元素太多，控制不好很麻煩。。。
3、overflow:hidden
這種方法是前段時間偶然在網(wǎng)上發(fā)現(xiàn)的，我目前正在使用次方法。這種方法是給父元素加overflow:hidden屬性，為了兼容IE6，這個父元素也要加上合適的寬度。但由于不再是浮動，所以不會對周圍的元素產(chǎn)生影響。對應(yīng)上面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;
}
點擊這里查看效果
查看效果也沒有居中， 我們還是用改寫一下#box，點擊這里查看改寫后的效果。
優(yōu)點：容易控制。
缺點：暫未發(fā)現(xiàn)。。。
渝公網(wǎng)安備 50010302000872號