?

首先先明確浮動最初的定義及使用場景：實現文本環繞圖片的效果。

除了用浮動外，目前暫無其他方法實現文本環繞

?

再來看看浮動的具體定義：

浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不屬于文檔中的普通流，屬于浮動布局。 (CSS三種基本的定位機制：普通流、浮動和絕對定位)

當一個元素浮動之后，不會影響到塊級框的布局而只會影響內聯框（通常是文本）的排列，文檔中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（“高度塌陷”現象）。顧名思義，就是漂浮于普通流之上，像浮云一樣，但是只能左右浮動。

正是因為浮動的這種特性，導致本屬于普通流中的元素浮動之后，包含框內部由于不存在其他普通流元素了，也就表現出高度為0（高度塌陷）。在實際布局中，往往這并不是我們所希望的，所以需要閉合浮動元素，使其包含框表現出正常的高度。

?
?

浮動未清除，會造成頁面混亂（如下）：

浮動元素沒有設置寬度值，元素的寬度隨內容的寬度的變化而變化

會對相鄰的元素產生影響，相鄰元素特指緊鄰后面的元素。

如果相鄰元素是塊級元素會無視這個浮動的塊框，也就是我們平時看到的效果——使到自身盡可能與這個浮動元素處于同一行，導致被浮動元素覆蓋。除非這些 div 設置了寬度，并且父元素的寬度不足以包含它們，這樣兄弟元素才會被強制換行。
如果相鄰元素是內聯元素，則會盡可能圍繞浮動元素。

元素父元素中的元素全部設置了浮動，父元素獲取高度失效(父元素不計算浮動元素高度，即高度塌陷)。

?
?

在介紹清除浮動方法之前，先了解下：什么是BFC?

Block formatting contexts （塊級格式化上下文），以下簡稱 BFC，用于對塊級元素排版。創建了 BFC的元素就是一個獨立的盒子（HTML中的一個盒子, 看不見而已），里面的子元素不會在布局上影響外面的元素，同樣，外面的元素，也不會影響其子元素。

默認情況下只有根元素（body）一個塊級上下文，其他元素滿足至少下列條件之一才能形成BFC:

float屬性不為none

position屬性不為static | relative

display屬性為下列之一:table-cell | table-caption| inline-block | flex | inline-flex

overflow屬性不為visible

fieldset元素  //fieldset標簽將表單的信息進行分類

?
?

但是它們各自卻有著不一樣的表現：

display: table : 在響應式布局中會有問題

overflow: scroll : 可能會出現你不想要的滾動條

float: left: 使元素左浮動，并且其他元素對其環繞

overflow: hidden: 消除溢出部分

需要注意的是，display:table 本身并不會創建BFC，但是它會產生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以創建新的BFC，換句話說，觸發塊級格式化上下文的是匿名框，而不是display:table。所以通過display:table和display:table-cell創建的BFC效果是不一樣的。

?
?

BFC的三個特性：

BFC會阻止外邊距疊加

當兩個相鄰的塊框在同一個塊級格式化上下文中時，它們之間垂直方向的外邊距會發生疊加。換句話說，如果這兩個相鄰的塊框不屬于同一個塊級格式化上下文，那么它們的外邊距就不會疊加。

BFC不會重疊浮動元素

根據規定，一個塊級格式化上下文的邊框不能和它里面的元素的外邊距重疊。這就意味著瀏覽器將會給塊級格式化上下文創建隱式的外邊距來阻止它和浮動元素的外邊距疊加。由于這個原因，當給一個挨著浮動的塊級格式化上下文添加負的外邊距時將會不起作用

BFC通?？梢园?(即計算BFC的高度時，浮動元素也參與計算)

獨立的塊級上下文可以包裹浮動流，全部浮動子元素也不會引起容器高度塌陷，也就是說包含塊會把浮動元素的高度也計算在內，所以不用清除浮動來撐起高度。同時BFC任然屬于文檔中的普通流。

父元素創建了新的BFC，可以閉合浮動

?
?

還有一個跟浮動和BFC有關的概念：hasLayout

hasLayout是ie私有的概念，ie7及更低版本的ie瀏覽器不支持BFC，但我們可以針對ie7、6瀏覽器加入對應的hasLayout規則來實現BFC的效果！

IE使用Layout概念來控制元素的尺寸和位置。可以用Javascript函數hasLayout查看一個元素是否擁有Layout，返回true | false。如果一個元素有Layout，它就有自身的尺寸和位置；如果沒有，它的尺寸和位置由最近的擁有布局的祖先元素控制。

hasLayout是一個只讀屬性，所以無法使用Javascript進行設置。元素的hasLayout屬性值為true的時候會達到和BFC類似的效果。以下方法可以使元素hasLayout為true：

position: absolute 

float: left | right

display: inline-block

width: 除 “auto” 外的任意值

height: 除 “auto” 外的任意值

zoom: 除 “normal” 外的任意值

writing-mode: tb-rl

在IE7中使用overflow: hidden|scroll|auto

?
?

具體清除浮動的方法及其優缺點:

其實大家習慣稱為“清除浮動”實際上應該稱作“閉合浮動”。我們想要達到的效果確切的說是閉合浮動，而不是單純的清除浮動，單純的清除浮動，并不能解決容器高度塌陷的問題。(浮動清除前后效果如圖：)

清除浮動：清除對應的單詞是 clear，對應CSS中的屬性是 clear：left | right | both |none；

閉合浮動：更確切的含義是使浮動元素閉合，從而減少浮動帶來的影響。

?

總結來說，有兩種方法閉合浮動：

浮動元素后面的同級標簽加clear: both | left | right屬性 （如下方法中的一、二、三）

為元素新建BFC（如下方法中的四、五、六）

    
  //浮動元素
    
  //浮動元素

?

方法一：浮動元素后，加樣式含clear：both的空標簽

    
  //浮動元素
    
  //浮動元素
    
  //加空標簽，閉合浮動

優點：通俗易懂，容易掌握

缺點：將添加很多無意義的空標簽，有違結構與表現的分離，后期維護會是噩夢。

?

?

方法二（摧薦）： 據說是最高大上的方法 :after 方法（注意：作用于浮動元素的父親）

原理：一種清除浮動，他就是利用:after和:before來在元素內部插入兩個偽元素，在偽元素中加入clear:both屬性。與方法一類似

.clearFloat {   /*對IE6/7的兼容處理*/
    zoom:1; /*觸發 hasLayout*/
}

.clearFloat::after {
    clear:both;  /*指清除所有浮動*/
    content:".";    /*內容，可以為空。也可以用Unicode字符里的 “零寬度空格”，也就是U+200B，這個字符本身是不可見的，可以省略掉 visibility:hidden*/
    display:block;  /*對于FF/chrome/opera/IE8不能缺少*/
    width: 0;
    height: 0;
    visibility:hidden; /*允許瀏覽器渲染它，但是不顯示出來*/

}

 //加clearFloat清除浮動
    
  //浮動元素
    
  //浮動元素

優點：瀏覽器支持好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）

缺點：代碼多，要兩句代碼結合使用，才能讓主流瀏覽器都支持

?
?

方法三（差）：使用br標簽及自身html屬性

(對應清除float:both、float:left、float:right的影響)

    

    

    
  //****閉合浮動

優點：比空標簽方式語義稍強，代碼量較少

缺點：同樣有違結構與表現的分離，不推薦使用

?
?

方法四：父級元素定義 overflow: auto | hidden (為兼容ie6，還需觸發hasLayout，如加: zoom: 1)

  //新建BFC
    

    

overflow屬性共有三個屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動，但切記不能使用visible值。據說auto對seo比較友好， hidden對seo不是太友好。

優點：簡單，代碼少，瀏覽器支持好缺點

缺點：內部寬高超過父級div時，會出現滾動條。

?
?

方法五（差）：父元素也設置浮動 float: left | right

  //新建BFC
    

    

優點：不存在結構和語義化問題，代碼量極少

缺點：使得與父元素相鄰的元素的布局會受到影響，不可能一直浮動到body，不推薦使用

?
?

方法六（差）：父元素設置display:table

  //新建BFC
    

    

優點：結構語義化完全正確，代碼量極少

缺點：盒模型屬性已經改變，由此造成的一系列問題，得不償失，不推薦使用