1.背景介紹

浮動也許具有一個其他屬性都不具備的特點，那就是文字環(huán)繞。

現(xiàn)如今用到浮動的地方很多，比如CSS的任務(wù)1九宮格我就使用了浮動，自適應(yīng)布局也用到了浮動，讓整個頁面充滿“流動性”,如果寬度不夠，浮動元素會自動另起一行，不會溢出讓水平滾動條出現(xiàn)。

文字環(huán)繞的效果

2.知識剖析

什么是浮動？ 浮動會使元素會脫離文檔流并向左/向右浮動，直到碰到父元素或者另一個浮動元素。

2.1 文檔流的概念

文檔流可能并不是一個準確的說法，但是也不難理解，因為在網(wǎng)頁的布局中，基礎(chǔ)的布局是自上而下，每個后面的元素都會出現(xiàn)在前面元素的下邊。這樣一行一行的也就和平時文檔的書寫差不多了。

2.2 浮動，脫離文檔流

通過使用浮動屬性，可以使元素脫離文檔流，隨后可以改變其位置的現(xiàn)象。

2.3 浮動的屬性值

浮動的屬性值有三個：float：none；float：left；float：right；

浮動不是任意的，其還是在父元素的范圍之中，不能脫離于父元素的內(nèi)容區(qū)域。

3.常見問題及為什么要清除浮動

如果我們不給父元素設(shè)置高度，我們知道如果它里面的元素不浮動的話， 那么這個外層的高是會自動被撐開的。

若浮動元素比它的父元素還高，那么它就會溢出父元素外面

當內(nèi)層元素所有浮動后，則影響更大：

（1）背景不能顯示

（2）邊框不能撐開

（3）高度塌陷等

方法1：父級div定義 height

原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。

優(yōu)點：簡單、代碼少、容易掌握

缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產(chǎn)生問題

建議：不推薦使用，只建議父元素高度固定的布局時使用

方法2：

使用clear屬性：在相同的父元素中，浮動的子元素之后添加一個空標簽，設(shè)置樣式為："clear：both;"標簽可以是div，也可以是p，或者br等塊元素。

原理：left 在左側(cè)不允許浮動元素; right 在右側(cè)不允許浮動元素; both 在左右兩側(cè)均不允許浮動元素

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

缺點：可以想象通過此方法，會添加多少無意義的空標簽，有違結(jié)構(gòu)與表現(xiàn)的分離，一旦代碼量大的話，在后期維護中將是噩夢。

建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法。

方法3：對父元素設(shè)置overflow的樣式，即overflow: auto/hidden;

原理：必須定義width，在IE6中還需要觸發(fā) hasLayout ，例如 zoom：1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度

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

缺點：內(nèi)容增多時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉，不能和position配合使用，無法顯示需要溢出的元素；

建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用。

5.擴展思考

問題: 還有哪些清除浮動的方法？

還有一些方法但是很少用，比如父元素也設(shè)置浮動； 父元素設(shè)置overflow：auto,但是必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區(qū)域的高度; 設(shè)置display：table;有興趣的可以去看看這方面的內(nèi)容，就不多贅述了。

6.參考文獻

參考一：CSS清除浮動大全共8種方法

http://www.jb51.net/css/173023.html

參考二：學(xué)習(xí)CSS布局

http://zh.learnlayout.com/float.html

參考三：css清除浮動float的三種方法總結(jié)

https://my.oschina.net/leipeng/blog/221125

參考四：CSS清除浮動常用方法小結(jié)

http://www.jb51.net/article/13995.htm

7.更多討論

問題1：float浮動會使元素脫離文檔流，那使用position屬性的原理進行元素的定位是不是和它是一樣使元素脫離文檔流呢？假如脫離的話，他們是不是浮動在一個層面上了？

float與position都有脫離文檔流的特點，但是position還有z-index屬性，可以選擇是覆蓋還是被覆蓋，而float并不能，所以position比float的靈活度更大。

問題2：如果我想讓2個<div>水平排列，并且寫在html文檔下面的那個<div>塊在右邊，應(yīng)該怎么操作？

可以在下面的那個<div>塊加上float：right屬性并且將上下2個<div>換位置，這樣的話原來下面的浮動到右邊同時脫離文檔流，原來上面的就占據(jù)文檔流并居左了。

問題3：浮動經(jīng)常用在哪里？

1、 浮動元素會被自動設(shè)置成塊級元素，相當于給元素設(shè)置了display:block（塊級元素能設(shè)置寬和高，而行內(nèi)元素則不可以）。?2、 浮動元素后邊的非浮動元素顯示問題。?3、 多個浮動方向一致的元素使用流式排列，此時要注意浮動元素的高度。?4、子元素全為浮動元素的元素高度自適應(yīng)問題。