overflow的處理詳解

WindySky 2009-03-19

展開全文

按照CSS規(guī)范，浮動元素（floats）會被移出文檔流，不會影響到塊狀盒子的布局而只會影響內(nèi)聯(lián)盒子（通常是文本）的排列。因此當(dāng)其高度超出包含容器時，一般父容器不會自動伸長以閉合浮動元素。但是有時我們卻需要這種自動閉合行為，具體如何處理呢？

　　有一種做法就是在父容器內(nèi)再插入一個額外的標(biāo)簽，并令其清除浮動（clear）以撐大父容器。這種方法瀏覽器兼容性好，沒有什么問題，缺點(diǎn)就是需要額外的（而且通常是無語義的）標(biāo)簽，所以我個人不大喜歡。

　　后來又有了一種新的方式，使用 :after 偽類動態(tài)的嵌入一個用于清除浮動的元素，這種方法和上一種原理一樣，不同的只是把這個額外的內(nèi)容用 CSS 生成，但考慮到 IE 不支持 :after 不得不做了不少的 hack。這種方法兼容性一般，但經(jīng)過各種 hack 也可以應(yīng)付不同瀏覽器了，時又可以保證 html 比較干凈，所以用得還是比較多的。

　　再后來又有人發(fā)現(xiàn)將父容器的 overflow 設(shè)為除 visible 之外的值就可以在標(biāo)準(zhǔn)兼容瀏覽器中閉合浮動元素，IE自然又是不支持的，所以這種方法和上一種方法一樣都對 IE 做了不同處理（具體就是觸發(fā)layout），不同的就是overflow 沒有 :after 偽類那么麻煩了，缺點(diǎn)也有，
overflow 可能會產(chǎn)生一些小沖突。

　　在使用 overflow 之前還有過一種使用 float 的方法，就是讓父容器也浮動，這利用到了浮動元素的一個特性——浮動元素會閉合浮動元素。這種方式在 IE/Win 和標(biāo)準(zhǔn)兼容瀏覽器中都有較好的效果，但缺點(diǎn)也很明顯——父容器未必想浮動就浮動的了，畢竟浮動是一種比較特殊的行為，有時布局不允許其浮動也很正常。使用 float 雖然在 IE 和標(biāo)準(zhǔn)兼容瀏覽器中都能閉合浮動元素，但原理卻是不同的，IE/Win 中
float 觸發(fā)了 layout 因而閉合了浮動，而在標(biāo)準(zhǔn)兼容瀏覽器中，float 其實(shí)和上一種方法中的 overflow 原理一樣，產(chǎn)生了一個“塊級格式化范圍”——這是CSS 規(guī)范中提到的一種現(xiàn)象，它往往具有某種獨(dú)立性，特性之一就是會自動閉合內(nèi)部的浮動元素。

　　按照規(guī)范，以下類型的元素會產(chǎn)生一個塊級格式化范圍：

　　● 浮動元素，left 或者 right 皆可。

　　● 絕對定位的元素。

　　● inline-block 元素，不過這個 gecko目前不支持。

　　● table-cell 類型元素，其實(shí) table, table-head-group, table-row 什么的也都可以，還有inline-table（gecko不支持）也同樣，因
為他們都會間接產(chǎn)生一個匿名的 table-cell。

　　● overflow 取值非 visible 的元素。

　　所以，原來在標(biāo)準(zhǔn)兼容瀏覽器中我們也可以有這么多的方法閉合一個浮動元素，而且只需要 CSS，無需其他。順帶說一下以上除了
overflow，其余都有一個附加效果就是自動收縮父容器寬度。
　　而對于 IE/Win，它有一套自己的體系，就是 layout，具有 layout 的元素會自動閉合浮動元素，再來看看觸發(fā) layout 的 CSS 屬性，
發(fā)現(xiàn)和上面的塊級格式化范圍有很多類似之處：
　　● 浮動元素
　　● 絕對定位元素
　　● display:inline-block
　　● zoom
　　● width/height
　　● overflow/overflow-x/overflow-y [IE7 新增]
　　● max/min-width/height [IE7 新增] 網(wǎng)頁教學(xué)網(wǎng)

　　以上來看 IE 中閉合浮動元素的方法也不少，自然也都有其局限性，要么有附帶效果，要么使用的是非標(biāo)準(zhǔn)屬性（無法通過驗(yàn)證）。

　　還要提一點(diǎn)的是 display:inline-block，這個屬性對 IE 而言本身沒什么用，實(shí)際效果只是給一個元素暗地添加了 layout，但是標(biāo)準(zhǔn)兼
容瀏覽器是認(rèn)得這個屬性的，所以要不影響這些瀏覽器，需要將 display 設(shè)回默認(rèn)。這里 IE 有一個 bug，如果先定義了 display:inline-
block，然后再將 display 設(shè)回 block（這兩個 display 要先后放在兩個 CSS 聲明中才有效果），那么 layout 不會消失，同時也不會影響
其他瀏覽器，所以目前來說，這也算一個不錯的觸發(fā) layout 的方法：
.gainlayout{display:inline-block;}
.gainlayout{display:block;}

　　所以要跨瀏覽器閉合浮動元素，可以選擇的方式還是很多的，如何搭配使用這些 CSS 屬性就要具體情況具體分析了，靈活應(yīng)用條件注釋也
很有必要，要是實(shí)在不行我們回過頭來還有 clear 可以用嘛。

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào)。

小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

overflow的處理詳解