一：為什麼盒子會塌陷？
原因：當父元素沒設定足夠大小的時候，而子元素設定了浮動的屬性，子元素就會跳出父元素的邊界（脫離文件流），尤其是當父元素的高度為auto時，而父元素中又沒有其它非浮動的可見元素時，父盒子的高度就會直接塌陷為零， 我們稱這是css高度塌陷。
二：怎麼清除塌陷？
方法：1、最簡單，直接，粗暴的方法就是盒子大小寫死，給每個盒子設定固定的width和height，直到合適為止，這樣的好處是簡單方便，相容性好，適合只改動少量內容不涉及盒子排布的版面，缺點是非自適應，瀏覽器的視窗大小直接影響使用者體驗。
2、給外部的父盒子也新增浮動，讓其也脫離標準文件流，這種方法方便，但是對頁面的布局不是很友好，不易維護。
3、給父盒子新增overflow屬性。
overflow:auto; 有可能出現滾動條，影響美觀。
overflow:hidden; 可能會帶來內容不可見的問題。
5、after偽類清除浮動。
外部盒子的after偽元素設定clear屬性。
CSS盒子塌陷問題的討論
什麼是盒子塌陷 理論上在父元素內部的元素 出現在盒子外部 出現原因?乙個父親不能被自己浮動的兒子，撐出高度。當父元素未設定 足夠 高度的時候，子元素設定了浮動的屬性時，子元素就會跳出父元素的邊界 脫離文件流 當父元素的高度為auto時，而父元素中又沒有其它非浮動的可見元素時，父盒子的高度就會直接塌陷...
CSS盒子塌陷問題解決方案
什麼是盒子塌陷？外部盒子本應該包裹住內部的浮動盒子，結果卻沒有。問題出現的原因 父元素只包含浮動元素，那麼它的高度就會塌縮為零 前提就是你們沒有設定高度 height 屬性，或者設定了為auto，就會出現這種情況，如果父元素不包含任何的可見背景，這個問題會很難被注意到。因為子元素設定了float屬性...
css控制HTML的盒子塌陷問題
在使用css來控制html樣式時可以會出現自己預想外的布局，這裡就可能會是html語言本身的問題 個人理解 比如盒子塌陷問題。在兩個巢狀的塊級元素 獨佔一行可以設定寬高的html標籤 中，設定了子元素的margin top屬性時會導致父元素一起下沉。這就是盒子塌陷問題。可以給父元素加乙個邊框 給父元...