按照CSS規(guī)范，CSS浮動(dòng)元素(floats)會(huì)被移出文檔流，當(dāng)其高度超出包含容器時(shí)，一般父容器不會(huì)自動(dòng)伸長(zhǎng)以閉合CSS浮動(dòng)元素。但是有時(shí)我們卻需要這種自動(dòng)閉合行為，具體如何處理呢？請(qǐng)看本文詳細(xì)介紹。

閉合CSS浮動(dòng)元素(floats)技巧

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

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

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

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

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

按照規(guī)范，以下類(lèi)型的元素會(huì)產(chǎn)生一個(gè)塊級(jí)格式化范圍：

　　◆CSS浮動(dòng)元素，left或者right皆可。

　　◆絕對(duì)定位的元素。

　　◆inline-block元素，不過(guò)這個(gè)gecko目前不支持。

　　◆table-cell類(lèi)型元素，其實(shí)table,table-head-group,table-row什么的也都可以，還有inline-table(gecko不支持)也同樣，因?yàn)樗麄兌紩?huì)間接產(chǎn)生一個(gè)匿名的table-cell。

　　◆overflow取值非visible的元素。

　　所以，原來(lái)在標(biāo)準(zhǔn)兼容瀏覽器中我們也可以有這么多的方法閉合一個(gè)CSS浮動(dòng)元素，而且只需要CSS，無(wú)需其他。順帶說(shuō)一下以上除了overflow，其余都有一個(gè)附加效果就是自動(dòng)收縮父容器寬度。

而對(duì)于IE/Win，它有一套自己的體系，就是layout，具有l(wèi)ayout的元素會(huì)自動(dòng)閉合CSS浮動(dòng)元素，再來(lái)看看觸發(fā)layout的CSS屬性，會(huì)發(fā)現(xiàn)和上面的塊級(jí)格式化范圍有很多類(lèi)似之處：

　　◆CSS浮動(dòng)元素

　　◆絕對(duì)定位元素

　　◆display:inline-block

　　◆zoom

　　◆width/height

　　◆overflow/overflow-x/overflow-y[IE7新增]

　　◆max/min-width/height[IE7新增]

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

　　還要提一點(diǎn)的是display:inline-block，這個(gè)屬性對(duì)IE而言本身沒(méi)什么用，實(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ì)影響其他瀏覽器，所以目前來(lái)說(shuō)，這也算一個(gè)不錯(cuò)的觸發(fā)layout的方法：

　　.gainlayout{display:inline-block;}

　　.gainlayout{display:block;}

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

【編輯推薦】

1. DIV+CSS滑動(dòng)門(mén)技術(shù)簡(jiǎn)介
2. 暢談DIV排版和table排版的區(qū)別
3. 14大CSS工具提高網(wǎng)頁(yè)設(shè)計(jì)效率
4. 實(shí)現(xiàn)DIV圖片居中方法揭秘
5. 鼠標(biāo)經(jīng)過(guò)時(shí)改變DIV背景顏色的三種途徑