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