有极速快乐十分吗|极速快乐十分走势图|

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

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

對于日新月異的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.bavugt.tw/librarys/veda/detail/1880,歡迎訪問原出處。

不打個分嗎?

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

http://www.bavugt.tw/librarys/veda/detail/1880

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

大家都在看

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

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

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

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

《高性能JavaScript》 Nicholas C. Zakas (作者), 趙澤欣 (合著者), 丁琛 (譯者)

《高性能JavaScript》揭示的技術和策略能幫助你在開發過程中消除性能瓶頸。你將會了解如何提升各方面的性能,包括代碼的加載、運行、DOM 交互、頁面生存周期等。雅虎的前端工程師 Nicholas C. Zakas 和其他五位 JavaScript 專家介紹了頁面代碼加載的最佳方法和編程技巧,來幫助你編寫更為高效和快速的代碼。你還會了解到構建和部署文件到生產環境的最佳實踐,以及有助于定位線上問題的工具。如果你使用 JavaScript 構建交互豐富的 Web 應用,那么 JavaScript 代碼可能是造成你的Web應用速度變慢的主要原因。

更多計算機寶庫...

有极速快乐十分吗
广东十一选五计划盘 贵州快三开奖查询 北京快乐3最新开奖 重庆快乐十分结果走势图 快3群计划都是假 青海11选五5全单开奖前后 中国足球近期赛事 浙江11选5遗漏 江苏快三基本走势图今 河北十一选五开奖查