什麼是盒子塌陷 ？
理論上在父元素內部的元素 出現在盒子外部

出現原因?
父盒子的空間有限，無法容納浮動的兒子，導致兒子離家出走。（O(∩_∩)O哈哈~）
當父元素未設定（足夠）高度的時候，子元素設定了浮動的屬性時，子元素就會跳出父元素的邊界（脫離文件流）。
（ 當父元素的高度為auto時，而父元素中又沒有其它非浮動的可見元素時，父盒子的高度就會直接塌陷為零， 我們稱這是CSS高度塌陷。 ）

（ 如圖：子元素設定浮動 導致父元素塌陷 ）

解決方法：

1.要給沒有設定高度的父元素設定 overfloat：hidden;

overflow:auto; 有可能出現滾動條，影響美觀。

overflow:hidden; 可能會帶來內容不可見的問題。

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

（ 設定 clear：both; ）用最下面的空盒子清除浮動，把盒子重新撐起來

<div style="clear:both;"></div>

並不推薦 引入了不必要的冗餘元素

3.設定 after 偽類清除浮動（外部盒子的after偽元素設定clear屬性。）

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

4.將盒子大小寫死，給每個盒子設定固定的width和height，直到合適為止（缺點是非自適應，瀏覽器的視窗大小直接影響使用者體驗）

5.給外部的父盒子也新增浮動，讓其也脫離標準文件流（但可能會影響頁面的佈局）