理解CSS浮動與清理

Tonny 發布于2019-08-29 12:23 / 1484人閱讀

摘要：浮動為什么會有文本環繞效果產生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。

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

本文主要討論以下幾個問題：
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浮動的深入研究、詳解及拓展(一)

張秋怡的回答

云服務器 GPU云服務器浮動-前端-css 深度學習與理解 css與html html與css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111860.html

理解CSS浮動與清理

摘要：浮動為什么會有文本環繞效果產生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。本文主要討論以下幾個問題：1.浮動的原始用途...

cyqian 2019-08-01 16:39 評論0 收藏0
CSS布局 ——從display，position， float屬性談起

摘要：生成相對定位的元素，相對于元素本身正常位置進行定位。元素的位置通過以及屬性進行規定。因為絕對定位與文檔流無關，所以絕對定位的元素可以覆蓋頁面上的其他元素，可以通過屬性控制疊放順序，越高，元素位置越靠上。頁面布局，或者是在頁面上做些小效果的時候經常會用到 display,position和float 屬性，如果對它們不是很了解的話，很容易出現一些莫名其妙的效果，痛定思痛讀了《CSS Maste...

hover_lew 2019-04-23 13:44 評論0 收藏0
了解CSS浮動以及清理浮動（Float）

摘要：浮動浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，相當于不占用空間，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。 CSS浮動浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，相當于不占用空間，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。 CSS ...

TZLLOG 2019-08-28 18:08 評論0 收藏0
清楚浮動/邊界塌陷bfc

摘要：不會重疊浮動元素可以包含浮動我們可以利用的第三條特性來清浮動，這里其實說清浮動已經不再合適，應該說包含浮動。總而言之清理浮動兩種方式利用屬性，清除浮動使父容器形成 CSS清浮動處理（Clear與BFC）在CSS布局中float屬性經常會被用到，但使用float屬性后會使其在普通流中脫離父容器，讓人很苦惱 1 浮動帶來布局的便利，卻也帶來了新問題復制代碼 1 2 3 4 ...

remcarpediem 2019-08-30 11:25 評論0 收藏0
CSS魔法堂：說說Float那個被埋沒的志向

摘要：時其寬度始終保持占滿寬度的態度。清除浮動就是為浮動影響的范圍劃邊界。那么可歸結為的父容器包裹所有子元素。注意屬性值不能為空白，否則無法清除浮動。前言 ?定位系統中第一難理解就是Normal flow，而第二就非Float莫屬了，而Float難理解的原因有倆，1. 一開頭我們就用錯了；2. 它跟Normal flow靠得太近了。本文嘗試理清Float的特性和行為特征，若有紕漏望各位指正...

legendmohe 2019-08-30 12:55 評論0 收藏0