????在現(xiàn)在的實(shí)際工作當(dāng)中我已經(jīng)很少用浮動來布局了，真的很少，剛開始學(xué)習(xí)的時候用的還蠻多，現(xiàn)在Flex布局，標(biāo)準(zhǔn)文檔流以及 定位 已經(jīng)可以滿足大部分的布局需求了。

浮動帶來的問題是盒子塌陷問題，所以我們就來解決這個問題吧

?? ?什么是盒子塌陷？

?? ?外部盒子本應(yīng)該包裹住內(nèi)部的浮動盒子，結(jié)果卻沒有。

?? ?問題出現(xiàn)的原因

?? ??? ?父元素只包含浮動元素，那么它的高度就會塌縮為零（前提就是你們沒有設(shè)置高度（height）屬性，或者設(shè)置了為auto，就會出現(xiàn)這種情況，如果父元素不包含任何的可見背景，這個問題會很難被注意到。

?? ??? ?因?yàn)樽釉卦O(shè)置了float屬性，而float屬性會把元素從標(biāo)準(zhǔn)文檔流中抽離，直接結(jié)果就是外部盒子丟了兩個孩子，因?yàn)閮?nèi)部沒有其它盒子了，所以外部盒子只包裹文本節(jié)點(diǎn)內(nèi)容，卻把兩個內(nèi)部盒子扔在外面了。

?? ?????解決方案

? ? ? ? 1、上面分析了問題出現(xiàn)的原因，不難找到第一種解決方案（既然孩子丟了，那就去找唄）——給外部盒子也添加浮動，
把外部盒子也從標(biāo)準(zhǔn)文檔流中抽離，讓它和孩子們見面。
????????缺點(diǎn)：可讀性差，不易于維護(hù)（別人很難理解為什么要給父元素也添上float），而且可能需要調(diào)整整個頁面布局。

? ? ? ? 2、在外部盒子內(nèi)最下方添上帶clear屬性的空盒子
可以是div也可以是其它塊級元素，把<div style="clear:both;"></div>放在盒內(nèi)底部，用最下面的空盒子清除浮動，把盒子重新?lián)纹饋怼?br>????????缺點(diǎn)：引入了冗余元素

? ? ? ? 3、用overflow:hidden清除浮動
給外部盒子添上這個屬性就好了，非常簡單。
????????缺點(diǎn)：有可能造成溢出元素不可見，影響展示效果。

? ? ? ? 4、用after偽元素清除浮動
給外部盒子的after偽元素設(shè)置clear屬性，再隱藏它這其實(shí)是對空盒子方案的改進(jìn)，一種純CSS的解決方案，不用引入冗余元素。
????????.clearfix {*zoom: 1;}
????????.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}
????????.clearfix:after {clear: both;}
????????這也是bootstrap框架采用的清除浮動的方法。

?? ?題外話
????其實(shí)還有一種最直接的辦法：給每個盒子規(guī)定width和height，要多大給多大即可。但這并不算什么解決方案，因?yàn)檫@樣的布局不是內(nèi)容自適應(yīng)的，但如果頁面內(nèi)容極少發(fā)生變動，這也是一個不錯的方案，因?yàn)樗募嫒菪允俏阌怪靡傻摹?/p>