?

首先先明確浮動(dòng)最初的定義及使用場(chǎng)景：實(shí)現(xiàn)文本環(huán)繞圖片的效果。

除了用浮動(dòng)外，目前暫無(wú)其他方法實(shí)現(xiàn)文本環(huán)繞

?

再來(lái)看看浮動(dòng)的具體定義：

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

當(dāng)一個(gè)元素浮動(dòng)之后，不會(huì)影響到塊級(jí)框的布局而只會(huì)影響內(nèi)聯(lián)框（通常是文本）的排列，文檔中的普通流就會(huì)表現(xiàn)得和浮動(dòng)框不存在一樣，當(dāng)浮動(dòng)框高度超出包含框的時(shí)候，也就會(huì)出現(xiàn)包含框不會(huì)自動(dòng)伸高來(lái)閉合浮動(dòng)元素（“高度塌陷”現(xiàn)象）。顧名思義，就是漂浮于普通流之上，像浮云一樣，但是只能左右浮動(dòng)。

正是因?yàn)楦?dòng)的這種特性，導(dǎo)致本屬于普通流中的元素浮動(dòng)之后，包含框內(nèi)部由于不存在其他普通流元素了，也就表現(xiàn)出高度為0（高度塌陷）。在實(shí)際布局中，往往這并不是我們所希望的，所以需要閉合浮動(dòng)元素，使其包含框表現(xiàn)出正常的高度。

?
?

浮動(dòng)未清除，會(huì)造成頁(yè)面混亂（如下）：

浮動(dòng)元素沒有設(shè)置寬度值，元素的寬度隨內(nèi)容的寬度的變化而變化

會(huì)對(duì)相鄰的元素產(chǎn)生影響，相鄰元素特指緊鄰后面的元素。

如果相鄰元素是塊級(jí)元素會(huì)無(wú)視這個(gè)浮動(dòng)的塊框，也就是我們平時(shí)看到的效果——使到自身盡可能與這個(gè)浮動(dòng)元素處于同一行，導(dǎo)致被浮動(dòng)元素覆蓋。除非這些 div 設(shè)置了寬度，并且父元素的寬度不足以包含它們，這樣兄弟元素才會(huì)被強(qiáng)制換行。
如果相鄰元素是內(nèi)聯(lián)元素，則會(huì)盡可能圍繞浮動(dòng)元素。

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

?
?

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

Block formatting contexts （塊級(jí)格式化上下文），以下簡(jiǎn)稱 BFC，用于對(duì)塊級(jí)元素排版。創(chuàng)建了 BFC的元素就是一個(gè)獨(dú)立的盒子（HTML中的一個(gè)盒子, 看不見而已），里面的子元素不會(huì)在布局上影響外面的元素，同樣，外面的元素，也不會(huì)影響其子元素。

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

float屬性不為none

position屬性不為static | relative

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

overflow屬性不為visible

fieldset元素  //fieldset標(biāo)簽將表單的信息進(jìn)行分類

?
?

但是它們各自卻有著不一樣的表現(xiàn)：

display: table : 在響應(yīng)式布局中會(huì)有問題

overflow: scroll : 可能會(huì)出現(xiàn)你不想要的滾動(dòng)條

float: left: 使元素左浮動(dòng)，并且其他元素對(duì)其環(huán)繞

overflow: hidden: 消除溢出部分

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

?
?

BFC的三個(gè)特性：

BFC會(huì)阻止外邊距疊加

當(dāng)兩個(gè)相鄰的塊框在同一個(gè)塊級(jí)格式化上下文中時(shí)，它們之間垂直方向的外邊距會(huì)發(fā)生疊加。換句話說(shuō)，如果這兩個(gè)相鄰的塊框不屬于同一個(gè)塊級(jí)格式化上下文，那么它們的外邊距就不會(huì)疊加。

BFC不會(huì)重疊浮動(dòng)元素

根據(jù)規(guī)定，一個(gè)塊級(jí)格式化上下文的邊框不能和它里面的元素的外邊距重疊。這就意味著瀏覽器將會(huì)給塊級(jí)格式化上下文創(chuàng)建隱式的外邊距來(lái)阻止它和浮動(dòng)元素的外邊距疊加。由于這個(gè)原因，當(dāng)給一個(gè)挨著浮動(dòng)的塊級(jí)格式化上下文添加負(fù)的外邊距時(shí)將會(huì)不起作用

BFC通常可以包含浮動(dòng) (即計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算)

獨(dú)立的塊級(jí)上下文可以包裹浮動(dòng)流，全部浮動(dòng)子元素也不會(huì)引起容器高度塌陷，也就是說(shuō)包含塊會(huì)把浮動(dòng)元素的高度也計(jì)算在內(nèi)，所以不用清除浮動(dòng)來(lái)?yè)纹鸶叨取Ｍ瑫r(shí)BFC任然屬于文檔中的普通流。

父元素創(chuàng)建了新的BFC，可以閉合浮動(dòng)

?
?

還有一個(gè)跟浮動(dòng)和BFC有關(guān)的概念：hasLayout

hasLayout是ie私有的概念，ie7及更低版本的ie瀏覽器不支持BFC，但我們可以針對(duì)ie7、6瀏覽器加入對(duì)應(yīng)的hasLayout規(guī)則來(lái)實(shí)現(xiàn)BFC的效果！

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

hasLayout是一個(gè)只讀屬性，所以無(wú)法使用Javascript進(jìn)行設(shè)置。元素的hasLayout屬性值為true的時(shí)候會(huì)達(dá)到和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

?
?

具體清除浮動(dòng)的方法及其優(yōu)缺點(diǎn):

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

清除浮動(dòng)：清除對(duì)應(yīng)的單詞是 clear，對(duì)應(yīng)CSS中的屬性是 clear：left | right | both |none；

閉合浮動(dòng)：更確切的含義是使浮動(dòng)元素閉合，從而減少浮動(dòng)帶來(lái)的影響。

?

總結(jié)來(lái)說(shuō)，有兩種方法閉合浮動(dòng)：

浮動(dòng)元素后面的同級(jí)標(biāo)簽加clear: both | left | right屬性 （如下方法中的一、二、三）

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

    
  //浮動(dòng)元素
    
  //浮動(dòng)元素

?

方法一：浮動(dòng)元素后，加樣式含clear：both的空標(biāo)簽

    
  //浮動(dòng)元素
    
  //浮動(dòng)元素
    
  //加空標(biāo)簽，閉合浮動(dòng)

優(yōu)點(diǎn)：通俗易懂，容易掌握

缺點(diǎn)：將添加很多無(wú)意義的空標(biāo)簽，有違結(jié)構(gòu)與表現(xiàn)的分離，后期維護(hù)會(huì)是噩夢(mèng)。

?

?

方法二（摧薦）： 據(jù)說(shuō)是最高大上的方法 :after 方法（注意：作用于浮動(dòng)元素的父親）

原理：一種清除浮動(dòng)，他就是利用:after和:before來(lái)在元素內(nèi)部插入兩個(gè)偽元素，在偽元素中加入clear:both屬性。與方法一類似

.clearFloat {   /*對(duì)IE6/7的兼容處理*/
    zoom:1; /*觸發(fā) hasLayout*/
}

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

}

 //加clearFloat清除浮動(dòng)
    
  //浮動(dòng)元素
    
  //浮動(dòng)元素

優(yōu)點(diǎn)：瀏覽器支持好，不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）

缺點(diǎn)：代碼多，要兩句代碼結(jié)合使用，才能讓主流瀏覽器都支持

?
?

方法三（差）：使用br標(biāo)簽及自身html屬性

(對(duì)應(yīng)清除float:both、float:left、float:right的影響)

    

    

    
  //****閉合浮動(dòng)

優(yōu)點(diǎn)：比空標(biāo)簽方式語(yǔ)義稍強(qiáng)，代碼量較少

缺點(diǎn)：同樣有違結(jié)構(gòu)與表現(xiàn)的分離，不推薦使用

?
?

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

  //新建BFC
    

    

overflow屬性共有三個(gè)屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來(lái)清除浮動(dòng)，但切記不能使用visible值。據(jù)說(shuō)auto對(duì)seo比較友好， hidden對(duì)seo不是太友好。

優(yōu)點(diǎn)：簡(jiǎn)單，代碼少，瀏覽器支持好缺點(diǎn)

缺點(diǎn)：內(nèi)部寬高超過父級(jí)div時(shí)，會(huì)出現(xiàn)滾動(dòng)條。

?
?

方法五（差）：父元素也設(shè)置浮動(dòng) float: left | right

  //新建BFC
    

    

優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語(yǔ)義化問題，代碼量極少

缺點(diǎn)：使得與父元素相鄰的元素的布局會(huì)受到影響，不可能一直浮動(dòng)到body，不推薦使用

?
?

方法六（差）：父元素設(shè)置display:table

  //新建BFC
    

    

優(yōu)點(diǎn)：結(jié)構(gòu)語(yǔ)義化完全正確，代碼量極少

缺點(diǎn)：盒模型屬性已經(jīng)改變，由此造成的一系列問題，得不償失，不推薦使用