一，盒子塌陷是什麼？
本應該在父盒子內部的元素跑到了外部。
二，為什麼會出現盒子塌陷？
當父元素沒設定足夠大小的時候，而子元素設定了浮動的屬性，子元素就會跳出父元素的邊界（脫離文件流），尤其是當父元素的高度為auto時，而父元素中又沒有其它非浮動的可見元素時，父盒子的高度就會直接塌陷為零， 我們稱這是css高度塌陷。
下圖下方兩個子元素的盒子分別設定了左浮動和右浮動，頂端的長條盒子出現了塌陷
ex :
三，關於盒子塌陷的幾種解決方法
最簡單，直接，粗暴的方法就是盒子大小寫死，給每個盒子設定固定的width和height，直到合適為止，這樣的好處是簡單方便，相容性好，適合只改動少量內容不涉及盒子排布的版面，缺點是非自適應，瀏覽器的視窗大小直接影響使用者體驗。
給外部的父盒子也新增浮動，讓其也脫離標準文件流，這種方法方便，但是對頁面的布局不是很友好，不易維護。
給父盒子新增overflow屬性。
overflow:auto; 有可能出現滾動條，影響美觀。
overflow:hidden; 可能會帶來內容不可見的問題。
父盒子裡最下方引入清除浮動塊。最簡單的有：
有很多人是這麼解決的，但是我們並不推薦，因為其引入了不必要的冗餘元素 。
after偽類清除浮動。
外部盒子的after偽元素設定clear屬性。
#parent
:after
備註：第五種方法雖好，但是低版本ie不相容，具體選擇哪種解決方法，可根據實際情況決定。
css盒子塌陷問題，以及解決塌陷的5種方法
一 為什麼盒子會塌陷？原因 當父元素沒設定足夠大小的時候，而子元素設定了浮動的屬性，子元素就會跳出父元素的邊界 脫離文件流 尤其是當父元素的高度為auto時，而父元素中又沒有其它非浮動的可見元素時，父盒子的高度就會直接塌陷為零，我們稱這是css高度塌陷。二 怎麼清除塌陷？方法 1 最簡單，直接，粗暴...
css之高度塌陷及其解決方法
普通流定位，又稱為文件流定位，是頁面元素的預設定位方式 頁面中的塊級元素 按照從上到下的方式逐個排列 頁面中的行內元素 按照從左到右的方式逐個排列 但是如何讓多個塊級元素在一行內顯示?這裡就引出了浮動定位 float屬性 取值為 left right 脫離文件流 元素會相對於它原來的位置偏移某個距離...
高度塌陷解決方法
如果父元素只包含浮動元素，且父元素未設定高度和寬度，那麼它的高度就會塌縮為零，也就是所謂的 高度塌陷 如果父級元素包含背景或者邊框，那麼溢位的元素就不像父級元素的一部分了。解決 高度塌陷 問題的方法 1.浮動父級元素，父級元素的高度就會擴大，直到完全包含它裡面的浮動元素。如果使用這種方法，一定要在該...