[css] 清除浮動的方式有哪些及優缺點？
什么是盒子塌陷？
外部盒子本應該包裹住內部的浮動盒子，結果卻沒有，
問題出現的原因
父元素只包含浮動元素，那么它的高度就會塌縮為零（前提就是你們沒有設定高度（height）屬性，或者設定了為auto，就會出現這種情況，如果父元素不包含任何的可見背景，這個問題會很難被注意到，
因為子元素設定了float屬性，而float屬性會把元素從標準檔案流中抽離，直接結果就是外部盒子丟了兩個孩子，因為內部沒有其它盒子了，所以外部盒子只包裹文本節點內容，卻把兩個內部盒子扔在外面了，
解決方案
上面分析了問題出現的原因，不難找到第一種解決方案（既然孩子丟了，那就去找唄）——給外部盒子也添加浮動
把外部盒子也從標準檔案流中抽離，讓它和孩子們見面，
缺點：可讀性差，不易于維護（別人很難理解為什么要給父元素也添上float），而且可能需要調整整個頁面布局，
在外部盒子內最下方添上帶clear屬性的空盒子
可以是div也可以是其它塊級元素，把 <div style="clear:both;"></div>放在盒內底部，用最下面的空盒子清除浮動，把盒子重新撐起來，
缺點：引入了冗余元素
用overflow:hidden清除浮動
給外部盒子添上這個屬性就好了，非常簡單，
缺點：有可能造成溢位元素不可見，影響展示效果，
用after偽元素清除浮動
給外部盒子的after偽元素設定clear屬性，再隱藏它
這其實是對空盒子方案的改進，一種純CSS的解決方案，不用引入冗余元素，
.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}
.clearfix:after {clear: both;}
這也是bootstrap框架采用的清除浮動的方法，
題外話
其實還有一種最直接的辦法：給每個盒子規定width和height，要多大給多大即可，但這并不算什么解決方案，因為這樣的布局不是內容自適應的，但如果頁面內容極少發生變動，這也是一個不錯的方案，因為它的兼容性是毋庸置疑的，
個人簡介
我是歌謠，歡迎和大家一起交流前后端知識，放棄很容易，
但堅持一定很酷，歡迎大家一起討論
主目錄
與歌謠一起通關前端面試題
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/263844.html
標籤：其他