欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

W3標準不變 清除浮動實現(xiàn)代碼

  發(fā)布時間：2012-05-27 04:21:16   作者：佚名   我要評論
對于日新月異的WEB開發(fā)技術和瀏覽器更新頻率來說，清除浮動已然是一個被人嚼碎了的話題。說是這些年過去了，有關float的地方，還依然少不了清除浮動的標簽和css代碼
W3C整天研究html5，就不能抽出點時間來把這種煩人的小細節(jié)修正一下嗎？抱怨歸抱怨，飯還得吃，錢還得掙，清除浮動就不能停止。

為了清除浮動增加無語義代碼已經(jīng)是最穩(wěn)定和簡單的方式，但總叫開發(fā)者心里感到不舒服，畢竟這么多年來早已習慣了結構和樣式的分離，非要在結構中插入這樣一行無語義代碼就會讓人覺得有種難以掌握的感受。

通過css代碼清除浮動也不省油，光是當前這種多個瀏覽器瓜分瀏覽器份額的狀況所帶來的各種css hack就夠讓人頭疼的了，而且這還沒說到那些個瀏覽器的不同版本之間又有多少的差別。通過css清除浮動還是一個長期的過程，因為你還要期盼下一牌瀏覽器沒有針對浮動修改對html代碼的解釋。

要說在當前這種惡劣的狀況下，選取哪種方式去清除浮動最為可取，這事一個人說了不算，要看大家的意見。

很多時候，開發(fā)人員在前端開發(fā)時遇到問題，就會去找那些運用了類似技術的大型網(wǎng)站，去分析它們的解決方案，然后用到自己的網(wǎng)站上，連為什么都省得去想了。我也常常這么做。具體到清除浮動這個問題上，我現(xiàn)在所用的無語義標簽法就是在看到某大型網(wǎng)站用過之后，我才選用的。

不過今天重提這個問題，是因為我又在一個大型網(wǎng)站上看到了不同的方案。它們是這樣做的：

復制代碼
代碼如下:

<style>
.clearfix:after{
visibility: hidden;
display: block;
font-size: 0;
content: ".";
clear: both;
height: 0;
}
* html .clearfix{zoom: 1;}
*:first-child + html .clearfix{zoom: 1;}
</style>
<div class="clearfix" style="border: 2px solid red;">
<div style="float: left; width: 80px; height: 80px; border: 1px solid blue;">
我的網(wǎng)站
</div>
</div>

雖說這是來自大型網(wǎng)站，可信任度很高，可以不去思考而直接用，但學習的態(tài)度還是要有，就此分析一下其中的原理。

1）首先是利用:after偽類來兼容支持這一標準的瀏覽器們，F(xiàn)F、Chrome自然屬于強烈支持標準的瀏覽器行列，不過IE自從繁殖到第八代開始，也表示支持這一偽類。:after偽類用來和content屬性一起使用設置在對象后的內(nèi)容。

如果現(xiàn)在不是2012看，而是10年后，可能就不用再往下講了。但因為現(xiàn)在IE6和IE7還很有勢力，所以，我們還得好好照顧它們。:after偽類IE不支持，它用來和content屬性一起使用設置在對象后的內(nèi)容，例如：

復制代碼
代碼如下:

.clearfix:after {content:".";}

這個CSS將會讓clearfix類標簽內(nèi)的文本后邊加上英文句號。

3）"* html"這個選擇符只有IE6才能識別，因此在其中設置縮放屬性"zoom: 1;"，便可實現(xiàn)兼容IE6；"*:first-child + html"這個選擇符只有IE7才能識別，因此設置縮放屬性"zoom: 1;" 便可實現(xiàn)兼容IE7。

原理分析完畢。方法是可行的，完美解決是不可能的。所以，W3標準中的浮動一天不變，清除浮動就會一天不止。

相關文章

最新評論