CSS閉合浮動元素教程
按照CSS規範,浮動元素(floats)會被移出文檔流,不會影響到塊狀盒子的佈局而只會影響內聯盒子(通常是文本)的排列。因此當其高度超出包含容器時,一般父容器不會自動伸長以閉合浮動元素。但是有時我們卻需要這種自動閉合行為,具體如何處理呢?
有一種做法就是在父容器內再插入一個額外的標籤,並令其清除浮動(clear)以撐大父容器。這種方法瀏覽器兼容性好,沒有什麼問題,缺點就是需要額外的(而且通常是無語義的)標籤,所以我個人不大喜歡。
後來又有了一種新的方式,使用:after偽類動態的嵌入一個用於清除浮動的元素,這種方法和上一種原理一樣,不同的只是把這個額外的內容用CSS生成,但考慮到IE不支持:after不得不做了不少的hack。這種方法兼容性一般,但經過各種hack也可以應付不同瀏覽器了,同時又可以保證html比較乾淨,所以用得還是比較多的。
再後來又有人發現將父容器的overflow設為除visible之外的值就可以在標準兼容瀏覽器中閉合浮動元素,IE自然又是不支持的,所以這種方法和上一種方法一樣都對IE做了不同處理(具體就是觸發layout),不同的就是overflow沒有:after偽類那麼麻煩了,缺點也有,overflow可能會產生一些小衝突。
在使用overflow之前還有過一種使用float的方法,就是讓父容器也浮動,這利用到了浮動元素的一個特性――浮動元素會閉合浮動元素。這種方式在IE/Win和標準兼容瀏覽器中都有較好的效果,但缺點也很明顯――父容器未必想浮動就浮動的了,畢竟浮動是一種比較特殊的行為,有時佈局不允許其浮動也很正常。使用float雖然在IE和標準兼容瀏覽器中都能閉合浮動元素,但原理卻是不同的,IE/Win中float觸發了layout因而閉合了浮動,而在標準兼容瀏覽器中,float其實和上一種方法中的overflow原理一樣,產生了一個“塊級格式化範圍”――這是CSS規範中提到的一種現象,它往往具有某種獨立性,特性之一就是會自動閉合內部的浮動元素。
按照規範,以下類型的元素會產生一個塊級格式化範圍:
●浮動元素,left或者right皆可。
●絕對定位的元素。
●inline-block元素,不過這個gecko目前不支持。
●table-cell類型元素,其實table,table-head-group,table-row什麼的也都可以,還有inline-table(gecko不支持)也同樣,因為他們都會間接產生一個匿名的table-cell。
●overflow取值非visible的.元素。
所以,原來在標準兼容瀏覽器中我們也可以有這麼多的方法閉合一個浮動元素,而且只需要CSS,無需其他。順帶説一下以上除了overflow,其餘都有一個附加效果就是自動收縮父容器寬度。
而對於IE/Win,它有一套自己的體系,就是layout,具有layout的元素會自動閉合浮動元素,再來看看觸發layout的CSS屬性,會發現和上面的塊級格式化範圍有很多類似之處:
●浮動元素
●絕對定位元素
●display:inline-block
●zoom
●width/height
●overflow/overflow-x/overflow-y[IE7新增]
●max/min-width/height[IE7新增]
以上來看IE中閉合浮動元素的方法也不少,自然也都有其侷限性,要麼有附帶效果,要麼使用的是非標準屬性(無法通過驗證)。
還要提一點的是display:inline-block,這個屬性對IE而言本身沒什麼用,實際效果只是給一個元素暗地添加了layout,但是標準兼容瀏覽器是認得這個屬性的,所以要不影響這些瀏覽器,需要將display設回默認。這裏IE有一個bug,如果先定義了display:inline-block,然後再將display設回block(這兩個display要先後放在兩個CSS聲明中才有效果),那麼layout不會消失,同時也不會影響其他瀏覽器,所以目前來説,這也算一個不錯的觸發layout的方法:
layout{display:inline-block;}
layout{display:block;}
所以要跨瀏覽器閉合浮動元素,可以選擇的方式還是很多的,如何搭配使用這些CSS屬性就要具體情況具體分析了,靈活應用條件註釋也很有必要,要是實在不行我們回過頭來還有clear可以用嘛。
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
JavaScript數據類型學習
ECMAscript中有5種簡單的數據類型,也被稱為基本數據類型:Undefined、Null、Boolean、Number和String。還有一種複雜的數據類型——Object。Undefined類型在使用var聲明變量但未對其進行初始化時,這個變量的值就是undefined。如:varnumber;e(number);//undefined如...
-
css經典教程
css經典教程1有些習慣顯得尤為重要,今天與您分享六個CSS習慣。因為習慣其實是會變的,所以只能寫“最近”的。這些習慣都跟技術無關,如果不遵守,也不會出錯。但是我覺得良好的習慣會體現一個人的素質。我們在中向大家介紹過很多CSS經驗與技巧,這些東西都發布在/css/...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...