一.問題重述
嗯，這個就是坍塌的盒子了。外部盒子本應該包裹住內部的兩個浮動盒子，結果卻沒有。
二.問題出現的原因
3個盒子都只設置了width，而沒有規定height，內部兩個盒子分別設置了左右浮動。布局就這么簡單，但結果和我們想象的卻大不一樣。
問題出現的原因是內部兩個盒子都有float屬性，而float屬性會把元素從標准文檔流中抽離，直接結果就是外部盒子丟了兩個孩子，因為內部沒有其它盒子了，所以外部盒子只包裹了文本節點內容，卻把兩個內部盒子扔在外面了。
三.解決方案
-
上面分析了問題出現的原因，不難找到第一種解決方案（既然孩子丟了，那就去找唄）
——給外部盒子也添加浮動
把外部盒子也從標准文檔流中抽離，讓它和孩子們見面。
缺點：可讀性差，不易於維護（別人很難理解為什么要給父元素也添上float），而且可能需要調整整個頁面布局
-
——在外部盒子內最下方添上帶clear屬性的空盒子
可以是div也可以是其它塊級元素，甚至最簡單的：把<br style=”clear:both;” />放在盒內底部
用最下面的空盒子清除浮動，把盒子重新撐起來。
缺點：引入了冗余元素
-
——用overflow:auto清除浮動
給外部盒子添上這個屬性就好了
非常簡單
缺點：應用邊框邊距可能會出現滾動條，影響外觀
-
——用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，要多大給多大即可。但這並不算什么解決方案，因為這樣的布局不是內容自適應的，但如果頁面內容極少發生變動，這也是一個不錯的方案，因為它的兼容性是毋庸置疑的。