依照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 的方法：
| .gainlayout{display:inline-block;} .gainlayout{display:block;} |
所以要跨瀏覽器閉合浮動元素，可以選擇的方式還是很多的，如何搭配使用這些CSS 屬性就要具體情況具體分析了，靈活應用條件註釋也很有必要，要是實在不行我們回過頭來還有clear可以用嘛。