關於盒子塌陷的幾種解決方法

1、最簡單，直接，粗暴的方法就是盒子大小寫死，給每個盒子設定固定的width和height，直到合適為止，這樣的好處是簡單方便，兼容性好，適合只改動少量內容不涉及盒子排布的版面，缺點是非自適應，瀏覽器的窗口大小直接影響用戶體驗。

2、給外部的父盒子也添加浮動，讓其也脫離標准文檔流，這種方法方便，但是對頁面的布局不是很友好，不易維護。

3、給父盒子添加overflow屬性。
overflow:auto; 有可能出現滾動條，影響美觀。
overflow:hidden; 可能會帶來內容不可見的問題。

4、父盒子里最下方引入清除浮動塊。最簡單的有：
<br style="clear:both;"/>
有很多人是這么解決的，但是我們並不推薦，因為其引入了不必要的冗余元素 。

5、after偽類清除浮動。
外部盒子的after偽元素設置clear屬性。

.mobileBackColor:after{
        clear: both;
        content: "";
        width: 0;
        height: 0;
        display: block;
        visibility: hidden;
    }

這是一種純CSS的解決浮動造成盒子塌陷方法，沒有引入任何冗余元素，推薦使用此方法來解決CSS盒子塌陷。
備注：第五種方法雖好，但是低版本IE不兼容，具體選擇哪種解決方法，可根據實際情況決定。

 

如果在蘋果手機上沒有效果的話 可以改寫為：

.mobileBackColor:after{
        clear: both;
        content: "";
        width: 0;
        height: 20px; // 給他一個高度
        display: block;
        visibility: hidden;
    }