這些日子，各個(gè)朋友圈隨時(shí)可以見(jiàn)到這句話(huà)的身影。的確人們常說(shuō)：“多一點(diǎn)真誠(chéng)，少一點(diǎn)套路?！保亲罱K現(xiàn)象寫(xiě)實(shí)也是那么殘酷和無(wú)奈。
同樣在前端攻城獅的道路，我們都是真誠(chéng)盡心盡力的去學(xué)習(xí)進(jìn)取。奈何先是各大瀏覽器廠商的大戰(zhàn)不斷，導(dǎo)致我們這群學(xué)習(xí)的人苦不堪言，一片水生火熱呀。不得不想進(jìn)各種hack方法解決。（沒(méi)錯(cuò)，這里就是吐槽的IE6?。?/p>
其次文檔標(biāo)準(zhǔn)流，在浮動(dòng)之后也會(huì)挖下塌陷的大坑。初學(xué)者稍有不慎，塌陷的失控的子元素到處亂竄，弄的你雞飛狗跳苦不堪言。那么為了后面前端大道越行越遠(yuǎn)，下面就跟大家講解一下清除浮動(dòng)的套路演變。
不過(guò)在講套路得時(shí)候，咱們順帶的也把浮動(dòng)之后塌陷大坑給順便重現(xiàn)一樣。
浮動(dòng)塌陷大坑：
先來(lái)看一個(gè)小小的demo：現(xiàn)在有兩個(gè)div，div身上沒(méi)有任何屬性。每個(gè)div中都有l(wèi)i，這些li都是浮動(dòng)的先是html骨架部分
css樣式：
看到這里，如果說(shuō)沒(méi)有吃過(guò)浮動(dòng)塌陷大虧的同學(xué)，肯定會(huì)以為這個(gè)網(wǎng)頁(yè)中效果是這個(gè)樣子
就是這么自信
但是實(shí)際上瀏覽器最終的渲染的樣子：
殘酷的事實(shí)
結(jié)果：第二個(gè)div中的li，去貼第一個(gè)div中最后一個(gè)li的邊了。
原因：div沒(méi)有高度，不能給自己浮動(dòng)的孩子們，一個(gè)容器。所以第二個(gè)div中的li，去貼第一個(gè)div中最后一個(gè)li的邊了！
這種現(xiàn)象又稱(chēng)作為浮動(dòng)塌陷現(xiàn)象！
講完浮動(dòng)塌陷之后，讓我開(kāi)始回歸今天的正題。清除浮動(dòng)塌陷的4種套路方法
套路1：給浮動(dòng)的元素的上級(jí)添加高度
如果一個(gè)元素要浮動(dòng)，那么它的祖先元素一定要有高度。高度的盒子，才能關(guān)住浮動(dòng)。
只要浮動(dòng)在一個(gè)有高度的盒子中，那么這個(gè)浮動(dòng)就不會(huì)影響后面的浮動(dòng)元素。所以就是清除浮動(dòng)帶來(lái)的影響了。
所以只需要給li的上級(jí)ul或者div設(shè)置一個(gè)height：40px；（只要是浮動(dòng)元素的上級(jí)元素就可以。），那么第二個(gè)div就好擠下來(lái)，在第一個(gè)盒子下面顯示出來(lái)。
套路2：clear:both;
但是在實(shí)際開(kāi)發(fā)過(guò)程當(dāng)中中，高度height很少出現(xiàn)。為什么？因?yàn)槟鼙粌?nèi)容撐高！那也就是說(shuō)，剛才我們講解的方法1，工作中用的很少。
那么這里有人可會(huì)腦洞大開(kāi)：能不能不寫(xiě)height，也把浮動(dòng)清除了呢？也讓浮動(dòng)之間，互不影響呢？
事實(shí)上的確有這樣的解決方法，是給他的上級(jí)添加一個(gè)clear：both；首先Clear就是清除的意思，both，代表左浮動(dòng)和右浮動(dòng)都清除掉。通俗一點(diǎn)來(lái)講，就是說(shuō)清除別人對(duì)我的影響。
雖然說(shuō)這樣可以清除浮動(dòng)塌陷現(xiàn)象，但是同樣也會(huì)有一個(gè)致命的問(wèn)題。那就是兩個(gè)div之間，margin值失效了，無(wú)法設(shè)置。再重申一下，是指兩個(gè)div之間。
套路3：隔墻法
既然用clear：both會(huì)導(dǎo)致兩個(gè)div之間margin失效，那么到后面有人又開(kāi)始腦洞大開(kāi)了。在中間一個(gè)空盒子，然后給那個(gè)空盒子clear：both；（為了方便大家看效果，這里并沒(méi)有放的是空盒子，而是放的有一個(gè)有高度、有顏色的盒子。）
這樣加了一堵墻之后，第二個(gè)div就能掉下來(lái)并且不干擾了上面的元素。而且第二個(gè)div還是能通過(guò)magin-top調(diào)節(jié)兩個(gè)div（“墻體”div不要算進(jìn)去）之間的間距，所以隔墻法作為一個(gè)新的套路沿傳開(kāi)來(lái)。
套路3.1：隔墻法進(jìn)化版—內(nèi)墻法
在這個(gè)世界上面存在一種人--完美主義者，在他們的世界觀里面瑕疵是堅(jiān)決不允許的。然后在前端行業(yè)中，也有一批追求完美主義前端攻城獅。他們對(duì)于隔墻法的小瑕疵表示完全不能接受，所以這一群完美主義的前端攻城獅開(kāi)始對(duì)他的隔墻法的完美的改造進(jìn)化去了。
于是“內(nèi)墻法”橫空誕生，先來(lái)看一下代碼結(jié)構(gòu)：
只是將墻體的位置改變了，就完美的解決第一個(gè)div不能通過(guò)margin-bottm來(lái)調(diào)節(jié)與下面div之間的間距。
所以后面很長(zhǎng)一段時(shí)間，“內(nèi)墻法”成為各大公司清除浮動(dòng)主流寫(xiě)法。
套路4：overflow：hidden；
overflow就是“溢出”的意思，hidden就是“隱藏”的意思。
通過(guò)截圖可以看出內(nèi)容太多，溢出了盒子。這個(gè)時(shí)候添加一行代碼overflow:hidden;發(fā)現(xiàn)溢出盒子邊框的內(nèi)容，被隱藏看不到了。
這個(gè)樣式本意就是清除溢出到盒子外面的文字。但是，被某些前端攻城獅工程師發(fā)現(xiàn)它能做偏方。寫(xiě)法簡(jiǎn)單粗暴，好理解。屬于在W3C文檔額外擴(kuò)展，就好比當(dāng)初發(fā)明摩托車(chē)的人絕對(duì)不會(huì)想到，摩托車(chē)還能開(kāi)這么開(kāi)。
所以這個(gè)overflow：hidden；也算是一個(gè)“祖?zhèn)骼掀健?/b>，能治浮動(dòng)塌陷老毛病。當(dāng)然既然是“偏方”，肯定就有因?yàn)橛行┨厥馇闆r下不能解決。導(dǎo)致只是淪為“偏方”而排不上正統(tǒng)。
偏方的失效情況：
就是當(dāng)其中涉及到position定位的時(shí)候，若定位的區(qū)域超出那個(gè)盒子，overflow：hidden；就會(huì)把多的部分裁切掉。
來(lái)自iTunes和天貓截圖合成
各位試想一下，假設(shè)這個(gè)藍(lán)色方框代表DIV盒子，如果給這個(gè)DIV盒子添加一個(gè)overflow：hidden；屬性后果會(huì)咋樣，估計(jì)產(chǎn)品當(dāng)天就提刀來(lái)見(jiàn)。
所以除了這個(gè)老毛病，overflow：hidden；其簡(jiǎn)單粗暴的寫(xiě)法，還是有與“內(nèi)墻法”一爭(zhēng)正室能力。
小結(jié)：
其實(shí)還有很多套路能夠清除浮動(dòng)，比如給浮動(dòng)塌陷的元素再添加一個(gè)浮動(dòng)，添加一個(gè)絕對(duì)定位……等一些方法。太多方法奇招怪招了，有興趣的小伙伴再另行研究。
目前只講這4種前端開(kāi)發(fā)過(guò)程主流清除浮動(dòng)塌陷的套路，聽(tīng)完這四種套路之后，以后各位小伙伴將采用哪一種方式清除浮動(dòng)呢！估計(jì)很多小伙伴會(huì)使用“內(nèi)墻法”來(lái)清除浮動(dòng)的，的確內(nèi)墻法以前是很流行。但是隨著時(shí)代是不斷進(jìn)步的，很多企業(yè)在實(shí)際開(kāi)發(fā)過(guò)程當(dāng)中不再單純的使用了“內(nèi)墻法”
這里估計(jì)有人就會(huì)吐槽了，不是說(shuō)好了主流清除浮動(dòng)就4種套路嗎？這4種套路就目前就“內(nèi)墻法”沒(méi)有暴露問(wèn)題，難不成用冷門(mén)的？
別著急，現(xiàn)在企業(yè)里面采用的清除浮動(dòng)方法綜合法，又名內(nèi)墻法2.0
給浮動(dòng)塌陷的盒子添加一個(gè)：after偽類(lèi)
這種方法在各個(gè)大型項(xiàng)目上都有出現(xiàn)過(guò)，可謂清除浮動(dòng)的萬(wàn)金油呀！本來(lái)說(shuō)好的四種套路，現(xiàn)在除了那四種套路之外卻一下子延伸出好幾種清除浮動(dòng)的套路，估計(jì)有些小伙伴要暈了吧。
下面讓我們通過(guò)思維導(dǎo)圖來(lái)幫助，暈頭的小伙們整理思路吧！
之所以給各位小伙伴繞了這么大一個(gè)圈子，就是怕直接就把這種方法拿出來(lái)告訴大家。肯定會(huì)有小伙伴疑惑為什么要這么寫(xiě)，而此時(shí)看到相信各位看完本文的套路介紹之后，對(duì)清除的浮動(dòng)的方法有了更深刻的了解了吧。
原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，再次再次再次歡迎各位啪啪的打臉賜教。（有句話(huà)說(shuō)的好，重要的詞得說(shuō)三遍。）
我是車(chē)大棒，我的目標(biāo)是星辰與大海。
