最優的浮動清除方案之一推薦

W3標準不變,清除浮動不止
服務器君一共花費了107.790 ms進行了4次數據庫查詢,努力地為您提供了這個頁面。
試試閱讀模式?希望聽取您的建議

對于日新月異的WEB開發技術和瀏覽器更新頻率來說,清除浮動已然是一個被人嚼碎了的話題。說是這些年過去了,有關float的地方,還依然少不了清除浮動的標簽和css代碼。W3C整天研究html5,就不能抽出點時間來把這種煩人的小細節修正一下嗎?抱怨歸抱怨,飯還得吃,錢還得掙,清除浮動就不能停止。

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

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

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

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

不過今天重提這個問題,是因為我又在一個大型網站上看到了不同的方案。它們是這樣做的:

<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;">
        簡明現代魔法
    </div>
</div>

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

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

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

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

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

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

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

本文地址:http://www.snpmgr.live/librarys/veda/detail/1880,歡迎訪問原出處。

不打個分嗎?

轉載隨意,但請帶上本文地址:

http://www.snpmgr.live/librarys/veda/detail/1880

如果你認為這篇文章值得更多人閱讀,歡迎使用下面的分享功能。
小提示:您可以按快捷鍵 Ctrl + D,或點此 加入收藏

大家都在看

閱讀一百本計算機著作吧,少年

很多人覺得自己技術進步很慢,學習效率低,我覺得一個重要原因是看的書少了。多少是多呢?起碼得看3、4、5、6米吧。給個具體的數量,那就100本書吧。很多人知識結構不好而且不系統,因為在特定領域有一個足夠量的知識量+足夠良好的知識結構,系統化以后就足以應對大量未曾遇到過的問題。

奉勸自學者:構建特定領域的知識結構體系的路徑中再也沒有比學習該專業的專業課程更好的了。如果我的知識結構體系足以囊括面試官的大部分甚至吞并他的知識結構體系的話,讀到他言語中的一個詞我們就已經知道他要表達什么,我們可以讓他坐“上位”畢竟他是面試官,但是在知識結構體系以及心理上我們就居高臨下。

所以,閱讀一百本計算機著作吧,少年!

《編程之美:微軟技術面試心得》 《編程之美》小組 (作者)

《編程之美:微軟技術面試心得》是一本讓人著迷的書!閱讀起來。有些題目的內容會引起強烈的共鳴,尤其是那些自己非常熟悉并且又深知解答的題目;也有一些題目讓我異常驚詫,原來除了我所知道的解答思路之外,還有更好的解答以及更深層次的原因。還有一些題目是從來沒想到過的。閱讀過程是一次愉快的享受,也是腦細胞持續活躍的過程。

更多計算機寶庫...

燃烧吧足球登陆