這些日子诸典，各個(gè)朋友圈隨時(shí)可以見(jiàn)到這句話的身影。的確人們常說(shuō)：“多一點(diǎn)真誠(chéng)崎苗，少一點(diǎn)套路狐粱。”胆数，但是最終現(xiàn)象寫(xiě)實(shí)也是那么殘酷和無(wú)奈脑奠。
同樣在前端攻城獅的道路，我們都是真誠(chéng)盡心盡力的去學(xué)習(xí)進(jìn)取幅慌。奈何先是各大瀏覽器廠商的大戰(zhàn)不斷宋欺，導(dǎo)致我們這群學(xué)習(xí)的人苦不堪言，一片水生火熱呀胰伍。不得不想進(jìn)各種hack方法解決齿诞。（沒(méi)錯(cuò)，這里就是吐槽的IE6Ｂ钭狻）
其次文檔標(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é)淺，文中若有不正之處龙亲，再次再次再次歡迎各位啪啪的打臉賜教陕凹。（有句話說(shuō)的好，重要的詞得說(shuō)三遍鳄炉。）
我是車(chē)大棒杜耙，我的目標(biāo)是星辰與大海。
