淺析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浮動的深入研究、詳解及拓展(一)

張秋怡的回答

作為前端寫了很多頁面配置，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。

本文主要討論以下幾個問題：
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;}

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