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