什麼是盒子塌陷？
外部盒子本應該包裹住內部的浮動盒子，結果卻沒有。
問題出現的原因
父元素只包含浮動元素，那麼它的高度就會塌縮為零（前提就是你們沒有設定高度（height）屬性，或者設定了為auto，就會出現這種情況，如果父元素不包含任何的可見背景，這個問題會很難被注意到。
因為子元素設定了float屬性，而float屬性會把元素從標準文件流中抽離，直接結果就是外部盒子丟了兩個孩子，因為內部沒有其它盒子了，所以外部盒子只包裹文字節點內容，卻把兩個內部盒子扔在外面了。
解決方案
上面分析了問題出現的原因，不難找到第一種解決方案（既然孩子丟了，那就去找唄）——給外部盒子也新增浮動
把外部盒子也從標準文件流中抽離，讓它和孩子們見面。
缺點：可讀性差，不易於維護（別人很難理解為什麼要給父元素也添上float），而且可能需要調整整個頁面布局。
在外部盒子內最下方添上帶clear屬性的空盒子
可以是div也可以是其它塊級元素，把
放在盒內底部，用最下面的空盒子清除浮動，把盒子重新撐起來。
缺點：引入了冗餘元素
用overflow:hidden清除浮動
給外部盒子添上這個屬性就好了，非常簡單。
缺點：有可能造成溢位元素不可見，影響展示效果。
用after偽元素清除浮動
給外部盒子的after偽元素設定clear屬性，再隱藏它
這其實是對空盒子方案的改進，一種純css的解決方案，不用引入冗餘元素。
.clearfix
.clearfix:before,.clearfix:after
.clearfix:after
這也是bootstrap框架採用的清除浮動的方法。
題外話其實還有一種最直接的辦法：給每個盒子規定width和height，要多大給多大即可。但這並不算什麼解決方案，因為這樣的布局不是內容自適應的，但如果頁面內容極少發生變動，這也是乙個不錯的方案，因為它的相容性是毋庸置疑的。
清除浮動的方法有哪些？
在前端頁面開發過程中，經常會遇到父元素中的子元素因為浮動而導致父元素高度為0的情況，如何解決這種問題，使得父元素能夠撐起高度，以下提供四種解決方法 方法一 額外標籤法 在最後乙個浮動標籤後面新增乙個新的標籤，其css設定為clear both。這種方式的缺點是額外增加了標籤元素，而且語義化較差。方法...
浮動布局的優缺點，清除浮動有哪些方式？
當元素浮動以後可以向左或向右移動，直到它的外邊緣碰到包含它的框或者另外乙個浮動元素的邊框為止。元素浮動以後會脫離正常的文件流，所以文件的普通流中的框就變現的好像浮動元素不存在一樣。這樣做的優點就是在 混排的時候可以很好的使文字環繞在周圍。另外當元素浮動了起來之後，它有著塊級元素的一些性質例如可以設定...
前端開發CSS清除浮動的方法有哪些？
在前端開發過程中，非ie瀏覽器下，當容器的高度自動，並且容器內容中有浮動元素 float為left或right 此時如果容器的高度不能自適應內容的高度，從而使得內容溢位破壞整體布局，這種現象叫做浮動溢位，為了方式這個現象的發生，就需要對css樣式進行處理，而這個過程就叫做css清除浮動。現在常用的c...