什么是浮動呢？
定義這樣說：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。 其實也就是把快級元素變成能和別的快級并排成一行。

浮動的的元素有4點特性：
1.浮動元素會脫離標準文檔流，已經(jīng)不區(qū)分快和行了。

2.浮動的元素會互相貼靠。

3.浮動的元素有“字圍”的效果。

4.收縮。一個浮動的元素，如果沒有設置width，那么將自動收縮為文字的寬度。

同樣在前端攻城獅的道路，我們都是真誠盡心盡力的去學習進取。奈何先是各大瀏覽器廠商的大戰(zhàn)不斷，導致我們這群學習的人苦不堪言，一片水生火熱呀。不得不想進各種hack方法解決。（沒錯，這里就是吐槽的IE6?。?/p>

其次文檔標準流，在浮動之后也會挖下塌陷的大坑。初學者稍有不慎，塌陷的失控的子元素到處亂竄，弄的你雞飛狗跳苦不堪言。那么為了后面前端大道越行越遠，下面就跟大家講解一下清除浮動的4種套路。 

不過在講套路得時候，咱們順帶的也把浮動之后塌陷大坑給順便重現(xiàn)一樣。

浮動塌陷大坑：
先來看一個小小的demo：現(xiàn)在有兩個div，div身上沒有任何屬性。每個div中都有l(wèi)i，這些li都是浮動的先是html骨架部分  

下面的是css樣式：

看到這里，如果說沒有吃過浮動塌陷大虧的同學，肯定會以為這個網(wǎng)頁中效果是這個樣子

但是實際上瀏覽器最終的渲染的樣子：

第二個div中的li，去貼第一個div中最后一個li的邊了。

原因就是因為div沒有高度，不能給自己浮動的孩子們，一個容器。

所以第二個div中的li，去貼第一個div中最后一個li的邊了！

這種現(xiàn)象又稱作為浮動塌陷現(xiàn)象！

講完浮動塌陷之后，讓我開始回歸今天的正題。清除浮動塌陷的4種方法

方法1：給浮動的元素的上級添加高度

如果一個元素要浮動，那么它的祖先元素一定要有高度。高度的盒子，才能關住浮動。

只要浮動在一個有高度的盒子中，那么這個浮動就不會影響后面的浮動元素。所以就是清除浮動帶來的影響了。

所以只需要給li的上級ul或者div設置一個height：40px；（只要是浮動元素的上級元素就可以。），那么第二個div就好擠下來，在第一個盒子下面顯示出來。

方法2：clear:both;
但是在實際開發(fā)過程當中中，高度height很少出現(xiàn)。為什么？因為能被內(nèi)容撐高！那也就是說，剛才我們講解的方法1，工作中用的很少。

那么這里有人可會腦洞大開：能不能不寫height，也把浮動清除了呢？也讓浮動之間，互不影響呢？

事實上的確有這樣的解決方法，是給他的上級添加一個clear：both；首先Clear就是清除的意思，both，代表左浮動和右浮動都清除掉。通俗一點來講，就是說清除別人對我的影響。

雖然說這樣可以清除浮動塌陷現(xiàn)象，但是同樣也會有一個致命的問題。那就是兩個div之間，margin值失效了，無法設置。再重申一下，是指兩個div之間。

方法3：隔墻法
既然用clear：both會導致兩個div之間margin失效，那么到后面有人又開始腦洞大開了。在中間一個空盒子，然后給那個空盒子clear：both；（為了方便大家看效果，這里并沒有放的是空盒子，而是放的有一個有高度、有顏色的盒子。）

這樣加了一堵墻之后，第二個div就能掉下來并且不干擾了上面的元素。而且第二個div還是能通過magin-top調(diào)節(jié)兩個div（“墻體”div不要算進去）之間的間距，所以隔墻法作為一個新的套路沿傳開來。

方法4：隔墻法進化版—內(nèi)墻法
在這個世界上面存在一種人--完美主義者，在他們的世界觀里面瑕疵是堅決不允許的。然后在前端行業(yè)中，也有一批追求完美主義前端攻城獅。他們對于隔墻法的小瑕疵表示完全不能接受，所以這一群完美主義的前端攻城獅開始對他的隔墻法的完美的改造進化去了。

于是“內(nèi)墻法”橫空誕生，先來看一下代碼結(jié)構(gòu)：

只是將墻體的位置改變了，就完美的解決第一個div不能通過margin-bottm來調(diào)節(jié)與下面div之間的間距。

所以后面很長一段時間，“內(nèi)墻法”成為各大公司清除浮動主流寫法。

方法5：overflow：hidden；
overflow就是“溢出”的意思，hidden就是“隱藏”的意思。

內(nèi)容太多，溢出了盒子

overflow:hidden;溢出盒子邊框的內(nèi)容，隱藏了。

這個樣式本意就是清除溢出到盒子外面的文字。但是，某些前端攻城獅工程師又發(fā)現(xiàn)了，它能做偏方。寫法簡單粗暴，好理解。屬于在W3C文檔額外擴展，就好比發(fā)明摩托車的人絕對不會想到，后面摩托車特技能夠把摩托頭揚起來行駛。

所以這個overflow：hidden；也算是一個“祖?zhèn)骼掀?rdquo;，能治浮動塌陷老毛病。當然既然是“偏方”，肯定就有因為有些特殊情況下不能解決。導致只是淪為“偏方”上不正統(tǒng)。

特殊情況就是定位的時候，若定位的區(qū)域超出那個盒子，overflow：hidden；就會把多的部分裁切掉。所以除了這個老毛病，overflow：hidden；其簡單粗暴的寫法，還是有與“內(nèi)墻法”一爭正室能力。

總結(jié)：

其實還有很多套路能夠清除浮動，比如給浮動塌陷的元素再添加一個浮動，添加一個絕對定位……等一些方法。

但是添加浮動，那樣只是把塌陷對象的層級上移了而已，給塌陷對象添加絕對定位同樣，也會受到其他定位的區(qū)域影響。所以這些消除定位之外，還需要額外添置的別的樣式的套路因此不在我們關注的范圍當中。

咱們只講這4種前端開發(fā)過程主流清除浮動塌陷的套路，聽完這四種套路之后，以后各位小伙伴將采用哪一種方式清除浮動呢！估計很多小伙伴會使用“內(nèi)墻法”來清除浮動的，的確內(nèi)墻法以前是很流行。但是隨著時代是不斷進步的，很多企業(yè)在實際開發(fā)過程當中不再單純的使用了“內(nèi)墻法”

這里估計有人就會吐槽了，不是說好了主流清除浮動就4種套路嗎？這4種套路就目前就“內(nèi)墻法”沒有暴露問題，難不成用冷門的？

別著急，現(xiàn)在企業(yè)里面采用的清除浮動方法綜合法，又名內(nèi)墻法2.0

給浮動塌陷的盒子添加一個：after偽類

這種方法在各個大型項目上都有出現(xiàn)過，可謂清除浮動的萬金油呀！本來說好的四種套路，現(xiàn)在除了那四種套路之外卻一下子延伸出好幾種清除浮動的套路，估計有些小伙伴要暈了吧。

下面讓我們通過思維導圖來幫助，暈頭的小伙們整理思路吧！

之所以給各位小伙伴繞了這么大一個圈子。就是怕直接就把這種方法拿出來告訴大家?？隙〞行』锇橐苫鬄槭裁匆@么寫，而此時看到相信各位看完本文的套路介紹之后，對清除的浮動的方法有了更深刻的了解了吧。

最新評論