CSS 盒子坍塌問題的 4 種解決方案

一。問題重述##

嗯，這個就是坍塌的盒子了。外部盒子本應該包裹住內部的兩個浮動盒子，結果卻沒有。

二。問題出現的原因##

3 個盒子都只設置了 width，而沒有規定 height，內部兩個盒子分別設置了左右浮動。佈局就是這麼簡單，但結果和我們想象的卻大不一樣。

問題出現的原因是內部兩個盒子都有 float 屬性，而 float 屬性會把元素從標準文檔流中抽離，直接結果就是外部盒子丟了兩個孩子，因為內部沒有其它盒子了，所以外部盒子只包裹了文本節點內容，卻把兩個內部盒子扔在外面了。

三。解決方案##

1. 上面分析了問題出現的原因，不難找到第一種解決方案（既然孩子丟了，那就去找唄）

——給外部盒子也添加浮動

把外部盒子也從標準文檔流中抽離，讓它和孩子們見面。

缺點：可讀性差，不易於維護（別人很難理解為什麼要給父元素也添上 float），而且可能需要調整整個頁面佈局

2. ——在外部盒子內最下方添上帶 clear 屬性的空盒子

可以是 div 也可以是其它塊級元素，甚至最簡單的：把<br style="clear:both;" />放在盒內底部

用最下面的空盒子清除浮動，把盒子重新撐起來。

缺點：引入了冗餘元素

3. ——用 overflow:auto 清除浮動

給外部盒子添上這個屬性就好了

非常簡單

缺點：應用邊框邊距可能會出現滾動條，影響外觀

4. ——用 after 僞元素清除浮動

給外部盒子的 after 僞元素設置 clear 屬性，再隱藏它

這其實是對空盒子方案的改進，一種純 CSS 的解決方案，不用引入冗餘元素。這是書中推薦的也是網絡上給出的最佳解決方案，但問題是 [IE7-] 並不支持 after 僞元素，書上說 [IE6-] 要配合 hack:.wrapper{height:1%;}共同使用，暫且不論誰對誰錯，因為 [IE7-] 好像根本不會出現問題，我們看圖說話。

四。測試結果##

（IE6/7 的測試結果來自 IETester，IE8 與 FF 來自本機，Chrome 結果與 FF 基本一致，但 Chrmoe 縮放不太科學，就沒有截圖。有趣的是仔細看截圖可以發現：IE6/7/8 展現效果都不一樣。。。）

可以點擊實驗源碼直接測試，至於哪種方法更好，不太好說，但從 IETester 測試結果來看，同樣的代碼並不會在 IE 中引發盒子坍塌問題，如果 IETester 沒錯的話，IE 應該根本就不存在盒子塌陷的問題。

但有幾個可選方案總是好的，可以根據具體情景做出選擇。

題外話###

其實還有一種最直接的辦法：給每個盒子規定 width 和 height，要多大給多大即可。但這不算什麼解決方案，因為這樣的佈局不是內容自適應的，但如果頁面內容極少發生變動，這也是一個不錯的方案，因為它的兼容性是毋庸置疑的。