理解CSS浮動與清理

做爲前端寫了不少頁面佈局，可是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現不少佈局，另外一方面浮動形成的影響又會破壞佈局讓人頭疼，因此今天就特意寫篇博文解決這塊盲點。

本文主要討論如下幾個問題：
1.浮動的原始用途
2.浮動爲何會有文本環繞效果
3.如何清理浮動形成的影響

浮動的原始用途

如下內容來自張鑫旭大神的《CSS float浮動的深刻研究、詳解及拓展(一)》：

假設如今CSS中沒有浮動(float)屬性，那麼會變成一個什麼樣子。咱們會發現，目前流行採用浮動方法實現的不管是分欄佈局，仍是列表排列咱們均可以用其餘一些CSS屬性（不考慮table）代替實現，惟一一個實現不了的就是「文字環繞圖片」，我是想不出來能有什麼方法可讓文字環繞圖片顯示。好，這個替代不了的做用纔是float真正的意義所在。

總結起來一句話：實現文本環繞圖片的效果。

浮動爲何會有文本環繞效果

產生這個疑問主要來自於以往的印象：

浮動的元素是脫離文檔流的。

咦？你都脫離文檔流了不是應該和下方未浮動的元素重疊嗎，爲何文本還能環繞你呢？

這個問題一直困擾着我，直到我看到《精通CSS》這本書。文中寫到：

浮動會讓元素脫離文檔流，再也不影響不浮動的元素。實際上，並不徹底如此。若是浮動的元素後面有一個文檔流中的元素，那麼這個元素的框會表現得像浮動根本不存在同樣。可是，框的文本內容會受到浮動元素的影響，會移動以留出空間。

也就是說，浮動元素的確脫離了文檔流，所以文檔流中的塊框會無視浮動的元素，可是文本不會。這點與絕對定位的脫離文檔流不同。

知乎上張秋怡學姐的回答也印證了這一觀點。

補充一點：文檔流這個說法其實不許確，在W3C標準中，只有普通流(normal flow)，可是許多國內文章和翻譯的書籍裏用的都是文檔流，長此以往你們就都用文檔流的說法了。

如何清理浮動形成的影響

其實浮動帶來的影響主要是

1.元素脫離普通流形成的父元素高度塌陷
2.下方非文本元素與浮動元素重疊，破壞了本來佈局

要清理這些影響，不少人都知道用clear屬性,爲何clear能清除浮動呢？

有兩種說法：
1.瀏覽器在設置clear元素的頂上添加足夠多的外邊距，使元素上邊框邊界垂直降低到浮動元素下外邊距的下面。
2.在設置clear元素的上外邊距之上增長清除空間，而外邊距自己不改變。

前者是CSS1和CSS2的實現原理，後者是CSS2.1的實現原理。但不管哪一種都達到了給浮動的元素留出了垂直空間，看上去清除了浮動的效果。同時，在設置clear元素之上填充的空間是實際存在於普通流中的。所以，父元素高度被撐開了。

關於清除浮動，其實還有許多方法。在《那些年咱們一塊兒清除過的浮動》這篇文章裏，將清除浮動的方法簡單分爲兩類：

1.經過在浮動元素的末尾添加一個空元素，設置 clear：both屬性，after僞元素其實也是經過 content 在元素的後面生成了內容爲一個點的塊級元素；
2.經過設置父元素 overflow 或者display：table 屬性來閉合浮動。

幾乎全部清除浮動的方法均可以概括到這兩類中，這裏結合上面的博文談一談，添加僞元素的方法：

1.display: block，使生成的元素以塊級元素顯示，佔滿剩餘空間。
2.在content中添加一個點，由於這個字符很是小。
3.設置height爲0，由於不但願這個新的內容佔據空間破壞佈局高度。
4.將visibility設置爲hidden，使生成的內容不可見，容許可能被生成的內容蓋住的部分能夠點擊和交互。
5.clear:　both清理浮動的影響

代碼以下：

.clearfix:after {
    display: block;
    content: ".";
    height: 0;
    visibility: hidden;
    clear: both;
}

這種方法在大多數現代瀏覽器中都是有效的，也是比較推薦的。至於其餘方法網上有不少，這裏就不詳細講了。

本文借鑑了部分其餘博客與文檔，附上連接：

參考連接：

CSS clear屬性

CSS 浮動

理解CSS浮動與清除浮動

那些年咱們一塊兒清除過的浮動

noraml flow

CSS float浮動的深刻研究、詳解及拓展(一)

張秋怡的回答