從業三年，項目無數，現在回過頭來，想要把一些重要的知識用白話整理出來：這個東西是什么？怎樣才是最佳實踐？希望對自己知識體系有梳理作用， 也希望對大家有些許幫助。

前端技術棧更新太快，眼花繚亂，大家一個勁攬過來學習的時候，別忘了回頭看看那些已經掌握的基礎知識。

第一篇就整理整理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次！
要注意了，我們是通過在別的元素上清除浮動來實現撐開高度的， 而不是在浮動元素上。

還是接著上面的例子，我們簡單修改一下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已經是歷史的產物了。

寫這些文章主要目的是為了梳理知識點，沒有固定計劃，想到哪寫到哪，如果大家有想了解的話，可以留言，我會結合經驗梳理知識，并告訴你為什么要這樣，怎么樣做才是最佳實踐。