請注意閉合浮動(dòng)元素讓我們的CSS代碼更規(guī)范_CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
按照CSS規(guī)范,浮動(dòng)元素(floats)會(huì)被移出文檔流,不會(huì)影響到塊狀盒子的布局而只會(huì)影響內(nèi)聯(lián)盒子(通常是文本)的排列。因此當(dāng)其高度超出包含容器時(shí),一般父容器不會(huì)自動(dòng)伸長以閉合浮動(dòng)元素。但是有時(shí)我們卻需要這種自動(dòng)閉合行為,具體如何處理呢?
有一種做法就是在父容器內(nèi)再插入一個(gè)額外的標(biāo)簽,并令其清除浮動(dòng)(clear)以撐大父容器。這種方法瀏覽器兼容性好,沒有什么問題,缺點(diǎn)就是需要額外的(而且通常是無語義的)標(biāo)簽,所以我個(gè)人不大喜歡。后來又有了一種新的方式,使用 :after 偽類動(dòng)態(tài)的嵌入一個(gè)用于清除浮動(dòng)的元素,這種方法和上一種原理一樣,不同的只是把這個(gè)額外的內(nèi)容用 CSS 生成,但考慮到 IE 不支持 :after 不得不做了不少的 hack。這種方法兼容性一般,但經(jīng)過各種 hack 也可以應(yīng)付不同瀏覽器了,同時(shí)又可以保證 html 比較干凈,所以用得還是比較多的。再后來又有人發(fā)現(xiàn)將父容器的 overflow 設(shè)為除 visible 之外的值就可以在標(biāo)準(zhǔn)兼容瀏覽器中閉合浮動(dòng)元素,IE自然又是不支持的,所以這種方法和上一種方法一樣都對 IE 做了不同處理(具體就是觸發(fā)layout),不同的就是overflow 沒有 :after 偽類那么麻煩了,缺點(diǎn)也有,overflow 可能會(huì)產(chǎn)生一些小沖突。在使用 overflow 之前還有過一種使用 float 的方法,就是讓父容器也浮動(dòng),這利用到了浮動(dòng)元素的一個(gè)特性——浮動(dòng)元素會(huì)閉合浮動(dòng)元素。這種方式在 IE/Win 和標(biāo)準(zhǔn)兼容瀏覽器中都有較好的效果,但缺點(diǎn)也很明顯——父容器未必想浮動(dòng)就浮動(dòng)的了,究竟浮動(dòng)是一種比較非凡的行為,有時(shí)布局不答應(yīng)其浮動(dòng)也很正常。使用 float 雖然在 IE 和標(biāo)準(zhǔn)兼容瀏覽器中都能閉合浮動(dòng)元素,但原理卻是不同的,IE/Win 中 float 觸發(fā)了 layout 因而閉合了浮動(dòng),而在標(biāo)準(zhǔn)兼容瀏覽器中,float 其實(shí)和上一種方法中的 overflow 原理一樣,產(chǎn)生了一個(gè)“塊級格式化范圍”——這是CSS 規(guī)范中提到的一種現(xiàn)象,它往往具有某種獨(dú)立性,特性之一就是會(huì)自動(dòng)閉合內(nèi)部的浮動(dòng)元素。
按照規(guī)范,以下類型的元素會(huì)產(chǎn)生一個(gè)塊級格式化范圍:
所以,原來在標(biāo)準(zhǔn)兼容瀏覽器中我們也可以有這么多的方法閉合一個(gè)浮動(dòng)元素,而且只需要 CSS,無需其他。順帶說一下以上除了overflow,其余都有一個(gè)附加效果就是自動(dòng)收縮父容器寬度。
而對于 IE/Win,它有一套自己的體系,就是 layout,具有 layout 的元素會(huì)自動(dòng)閉合浮動(dòng)元素,再來看看觸發(fā) layout 的 CSS 屬性,會(huì)發(fā)現(xiàn)和上面的塊級格式化范圍有很多類似之處:
以上來看 IE 中閉合浮動(dòng)元素的方法也不少,自然也都有其局限性,要么有附帶效果,要么使用的是非標(biāo)準(zhǔn)屬性(無法通過驗(yàn)證)。
還要提一點(diǎn)的是 display:inline-block,這個(gè)屬性對 IE 而言本身沒什么用,實(shí)際效果只是給一個(gè)元素暗地添加了 layout,但是標(biāo)準(zhǔn)兼容瀏覽器是認(rèn)得這個(gè)屬性的,所以要不影響這些瀏覽器,需要將 display 設(shè)回默認(rèn)。這里 IE 有一個(gè) bug,假如先定義了 display:inline-block,然后再將 display 設(shè)回 block(這兩個(gè) display 要先后放在兩個(gè) CSS 聲明中才有效果),那么 layout 不會(huì)消失,同時(shí)也不會(huì)影響其他瀏覽器,所以目前來說,這也算一個(gè)不錯(cuò)的觸發(fā) layout 的方法:
所以要跨瀏覽器閉合浮動(dòng)元素,可以選擇的方式還是很多的,如何搭配使用這些 CSS 屬性就要具體情況具體分析了,靈活應(yīng)用條件注釋也很有必要,要是實(shí)在不行我們回過頭來還有 clear 可以用嘛。
有一種做法就是在父容器內(nèi)再插入一個(gè)額外的標(biāo)簽,并令其清除浮動(dòng)(clear)以撐大父容器。這種方法瀏覽器兼容性好,沒有什么問題,缺點(diǎn)就是需要額外的(而且通常是無語義的)標(biāo)簽,所以我個(gè)人不大喜歡。后來又有了一種新的方式,使用 :after 偽類動(dòng)態(tài)的嵌入一個(gè)用于清除浮動(dòng)的元素,這種方法和上一種原理一樣,不同的只是把這個(gè)額外的內(nèi)容用 CSS 生成,但考慮到 IE 不支持 :after 不得不做了不少的 hack。這種方法兼容性一般,但經(jīng)過各種 hack 也可以應(yīng)付不同瀏覽器了,同時(shí)又可以保證 html 比較干凈,所以用得還是比較多的。再后來又有人發(fā)現(xiàn)將父容器的 overflow 設(shè)為除 visible 之外的值就可以在標(biāo)準(zhǔn)兼容瀏覽器中閉合浮動(dòng)元素,IE自然又是不支持的,所以這種方法和上一種方法一樣都對 IE 做了不同處理(具體就是觸發(fā)layout),不同的就是overflow 沒有 :after 偽類那么麻煩了,缺點(diǎn)也有,overflow 可能會(huì)產(chǎn)生一些小沖突。在使用 overflow 之前還有過一種使用 float 的方法,就是讓父容器也浮動(dòng),這利用到了浮動(dòng)元素的一個(gè)特性——浮動(dòng)元素會(huì)閉合浮動(dòng)元素。這種方式在 IE/Win 和標(biāo)準(zhǔn)兼容瀏覽器中都有較好的效果,但缺點(diǎn)也很明顯——父容器未必想浮動(dòng)就浮動(dòng)的了,究竟浮動(dòng)是一種比較非凡的行為,有時(shí)布局不答應(yīng)其浮動(dòng)也很正常。使用 float 雖然在 IE 和標(biāo)準(zhǔn)兼容瀏覽器中都能閉合浮動(dòng)元素,但原理卻是不同的,IE/Win 中 float 觸發(fā)了 layout 因而閉合了浮動(dòng),而在標(biāo)準(zhǔn)兼容瀏覽器中,float 其實(shí)和上一種方法中的 overflow 原理一樣,產(chǎn)生了一個(gè)“塊級格式化范圍”——這是CSS 規(guī)范中提到的一種現(xiàn)象,它往往具有某種獨(dú)立性,特性之一就是會(huì)自動(dòng)閉合內(nèi)部的浮動(dòng)元素。
按照規(guī)范,以下類型的元素會(huì)產(chǎn)生一個(gè)塊級格式化范圍:
示例代碼 [www.wf0088.com]
浮動(dòng)元素,left 或者 right 皆可。
絕對定位的元素。
inline-block 元素,不過這個(gè) gecko目前不支持。
table-cell 類型元素,其實(shí) table, table-head-group, table-row 什么的也都可以,還有inline-table(gecko不支持)也同樣,因?yàn)樗麄兌紩?huì)間接產(chǎn)生一個(gè)匿名的 table-cell。
overflow 取值非 visible 的元素。
絕對定位的元素。
inline-block 元素,不過這個(gè) gecko目前不支持。
table-cell 類型元素,其實(shí) table, table-head-group, table-row 什么的也都可以,還有inline-table(gecko不支持)也同樣,因?yàn)樗麄兌紩?huì)間接產(chǎn)生一個(gè)匿名的 table-cell。
overflow 取值非 visible 的元素。
所以,原來在標(biāo)準(zhǔn)兼容瀏覽器中我們也可以有這么多的方法閉合一個(gè)浮動(dòng)元素,而且只需要 CSS,無需其他。順帶說一下以上除了overflow,其余都有一個(gè)附加效果就是自動(dòng)收縮父容器寬度。
而對于 IE/Win,它有一套自己的體系,就是 layout,具有 layout 的元素會(huì)自動(dòng)閉合浮動(dòng)元素,再來看看觸發(fā) layout 的 CSS 屬性,會(huì)發(fā)現(xiàn)和上面的塊級格式化范圍有很多類似之處:
示例代碼 [www.wf0088.com]
浮動(dòng)元素
絕對定位元素
display:inline-block
zoom
width/height
overflow/overflow-x/overflow-y [IE7 新增]
max/min-width/height [IE7 新增]
絕對定位元素
display:inline-block
zoom
width/height
overflow/overflow-x/overflow-y [IE7 新增]
max/min-width/height [IE7 新增]
以上來看 IE 中閉合浮動(dòng)元素的方法也不少,自然也都有其局限性,要么有附帶效果,要么使用的是非標(biāo)準(zhǔn)屬性(無法通過驗(yàn)證)。
還要提一點(diǎn)的是 display:inline-block,這個(gè)屬性對 IE 而言本身沒什么用,實(shí)際效果只是給一個(gè)元素暗地添加了 layout,但是標(biāo)準(zhǔn)兼容瀏覽器是認(rèn)得這個(gè)屬性的,所以要不影響這些瀏覽器,需要將 display 設(shè)回默認(rèn)。這里 IE 有一個(gè) bug,假如先定義了 display:inline-block,然后再將 display 設(shè)回 block(這兩個(gè) display 要先后放在兩個(gè) CSS 聲明中才有效果),那么 layout 不會(huì)消失,同時(shí)也不會(huì)影響其他瀏覽器,所以目前來說,這也算一個(gè)不錯(cuò)的觸發(fā) layout 的方法:
示例代碼 [www.wf0088.com]
.gainlayout{display:inline-block;}
.gainlayout{display:block;}
.gainlayout{display:block;}
所以要跨瀏覽器閉合浮動(dòng)元素,可以選擇的方式還是很多的,如何搭配使用這些 CSS 屬性就要具體情況具體分析了,靈活應(yīng)用條件注釋也很有必要,要是實(shí)在不行我們回過頭來還有 clear 可以用嘛。
相關(guān)CSS教程:
- 相關(guān)鏈接:
- 教程說明:
CSS教程-請注意閉合浮動(dòng)元素讓我們的CSS代碼更規(guī)范。