【轉】CSS中的浮動和清除浮動
以下轉自《CSS中的浮動和清除浮動，梳理一下！》
浮動到底是什麽？
浮動核心就一句話：浮動元素會脫離文檔流並向左/向右浮動，直到碰到父元素或者另一個浮動元素。請默念3次！
浮動最初設計的目的並沒那麽多事兒，就只是用來實現文字環繞效果而已，如下所示：
文字環繞效果
但是早期的前端開發者發現：浮動的元素可以設置寬高並且可以內聯排列，是介於inline和block之間的一個神奇的存在，在inline-block出來之前，浮動大行其道。直到inline-block出來後，浮動也有它自己獨特的使用場景。
浮動有哪些特征？
浮動的特征就體現在前文的那句話中，別忘了默念三次！此外，浮動帶來的負效果也算是它的特征之一。
浮動會脫離文檔
脫離文檔，也就是說浮動不會影響普通元素的布局
浮動會脫離文檔流
從上圖可以看出，默認三個設置了寬高的block元素，本來會格子獨占一行；如果框1設置了向左/向右浮動，他會忽略框2和框3，直到碰到父元素；同時也存在蓋住普通元素的風險。
浮動可以內聯排列
浮動會向左/向右浮動，直到碰到另一個浮動元素為止，這是浮動可以內聯排列的特征。也就是說，浮動可以設置寬高，並且能夠一行多個，是介於block和inline之間的存在。
浮動可以內聯排列
從上圖可以看出，對多個元素設置浮動，可以實現類似inline-block
浮動會導致父元素高度坍塌
浮動會脫離文檔流，這個問題對整個頁面布局有很大的影響。
// css .box-wrapper { border: 5px solid red; } .box-wrapper .box { float: left; width: 100px; height: 100px; margin: 20px; background-color: green; } // html <div class="box-wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
結果如下，浮動元素脫離了文檔流，並不占據文檔流的位置，自然父元素也就不能被撐開，所以沒了高度。
父元素高度坍塌
那怎麽辦呢？那就需要我們清除浮動，來解決高度坍塌問題！
清除浮動主要有兩種方式，分別是clear清除浮動和BFC清除浮動，其他的你也不用去了解了。
clear如何清除浮動？
clear屬性不允許被清除浮動的元素的左邊/右邊挨著浮動元素，底層原理是在被清除浮動的元素上邊或者下邊添加足夠的清除空間。這句話，請默念5次！
要註意了，我們是通過在別的元素上清除浮動來實現撐開高度的， 而不是在浮動元素上。
這裏插兩句自己關於clear的理解， clear:left 會導致元素下降直到不和左浮動同行， clear:right 會導致元素下降直到不和右浮動同行。
both同理。而不是說左/右浮動的那個元素就不浮動了。（初學，不一定準確。） --wenr
還是接著上面的例子，我們簡單修改一下HTML代碼，如下
<div class="box-wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div style="clear:both;"></div> </div>
clear清除浮動
高度坍塌的問題解決了，至此，好像浮動我們可以隨便玩了，真棒！
不要在浮動元素上清除浮動
但是有人問到，如果我們給第三個元素加上clear:both，結果會怎樣？
<div class="box-wrapper"> <div class="box"></div> <div class="box"></div> <div class="box" style="clear:both;"></div> </div>
誒？給第三個元素加上clear:both之後，第三個元素的左右都沒有挨著浮動元素，但是為什麽高度還是坍塌了呢？機智的你可能發現了，由於第三個元素是浮動元素，脫離了文檔流，就算給第三個元素上下加了清除空間，也是沒有任何意義的。
clear清除浮動最佳實踐
那麽clear清除浮動的最佳實踐是什麽呢？請看如下代碼：
// 現代瀏覽器clearfix方案，不支持IE6/7 .clearfix:after { display: table; content: " "; clear: both; } // 全瀏覽器通用的clearfix方案 // 引入了zoom以支持IE6/7 .clearfix:after { display: table; content: " "; clear: both; } .clearfix{ *zoom: 1; } // 全瀏覽器通用的clearfix方案【推薦】 // 引入了zoom以支持IE6/7 // 同時加入:before以解決現代瀏覽器上邊距折疊的問題 .clearfix:before, .clearfix:after { display: table; content: " "; } .clearfix:after { clear: both; } .clearfix{ *zoom: 1; }
clearfix清除浮動
一句話，強烈推薦clearfix的方式清除浮動！
BFC清除浮動
BFC全稱是塊狀格式化上下文，它是按照塊級盒子布局的。我們了解他的特征、觸發方式、常見使用場景這些就夠了。
BFC的主要特征
? BFC容器是一個隔離的容器，和其他元素互不幹擾；所以我們可以用觸發兩個元素的BFC來解決垂直邊距折疊問題。
? BFC可以包含浮動；通常用來解決浮動父元素高度坍塌的問題。
其中，BFC清除浮動就是用的“包含浮動”這條特性。
那麽，怎樣才能觸發BFC呢？
BFC的觸發方式
我們可以給父元素添加以下屬性來觸發BFC：
? float 為 left | right
? overflow 為 hidden | auto | scorll
? display 為 table-cell | table-caption | inline-block | flex | inline-flex
? position 為 absolute | fixed
所以我們可以給父元素設置overflow:auto來簡單的實現BFC清除浮動，但是為了兼容IE最好用overflow:hidden。但是這樣元素陰影或下拉菜單會被截斷，比較局限。
.box-wrapper{ overflow: hidden; }
浮動的適用場景有哪些？
文字環繞效果
這個不用說了，浮動本來就是為文字環繞效果而生，這是最基本的
文字環繞效果
頁面布局
浮動可以實現常規的多列布局，但個人推薦使用inline-block。
浮動更適合實現自適應多列布局，比如左側固定寬度，右側根據父元素寬度自適應。
頁面布局
多個元素內聯排列
如果前文提到的，浮動可以實現類似inline-block的排列，比如菜單多個元素內聯排列。但個人推薦使用inline-block。
多個元素內聯排列
又來點總結？
本來只是想簡單說說浮動的背景、浮動的問題，浮動的解決方案，但真整理起來的時候，又發現很多知識點需要擴展，很多東西需要掰扯，一文難以言盡，所以只挑一些我覺得比較主流比較重要的知識寫出來，如果有興趣可以自行展開。
? 浮動最初設計只是用來實現文字環繞排版的。
? 浮動的三個特點很重要。
1. 脫離文檔流。
2. 向左/向右浮動直到遇到父元素或者別的浮動元素。
3. 浮動會導致父元素高度坍塌。
? 解決父元素高度坍塌的方式就是清除浮動，常規的方法是clear清除浮動和BFC清除浮動，推薦clearfix的方式。一定要弄清楚clear清除浮動的底層原理以及clearfix的那幾行代碼的具體作用。
? BFC有自己的特征，也有觸發BFC的方式，這兒就不展開太多了。
? IE6/7不支持BFC，也不支持:after，所以IE6/7清除浮動要靠觸發hasLayout，了解下就行，畢竟IE6/7已經是歷史的產物了。
作者：齊修_qixiuss
鏈接：https://www.jianshu.com/p/09bd5873bed4
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。
【轉】CSS中的浮動和清除浮動