閉合CSS浮動元素的方法介紹

大家知道閉合CSS浮動元素的方法嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗，在此拿出來與大家分享下，請大家互相指正。

有一種做法就是在父容器內再插入一個額外的標簽，並令其清除浮動(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 的方法：

.gainlayout{display:inline-block;}

.gainlayout{display:block;}

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

相信大家已經學會閉合CSS浮動元素的方法吧!感謝大家對我們網站的支持!

相關推薦：

cssimg圖片元素下多余空白解決方法介紹