淺析CSS中的浮動與清理
- 巴扎黑原創
- 2017-04-15 09:05:241299瀏覽
作為前端寫了很多頁面佈局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現很多佈局，另一方面浮動造成的影響又會破壞佈局讓人頭疼，所以今天就特地寫篇部落格文章解決這塊盲點。
本文主要討論以下幾個問題：
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;
}
這種方法在大多數現代瀏覽器中都是有效的，也是比較建議的。至於其他方法網路上有很多，這裡就不詳細講了。
以上是淺析CSS中的浮動與清理的詳細內容。更多資訊請關注PHP中文網其他相關文章！