首頁 >web前端 >css教學 >淺析CSS中的浮動與清理

淺析CSS中的浮動與清理

巴扎黑
巴扎黑原創
2017-04-15 09:05:241321瀏覽

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

本文主要討論以下幾個問題:
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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn