資訊專欄INFORMATION COLUMN
摘要：那我們舉個栗子當先聲明一個元素向左浮動時，由于脫離文檔流，這個元素的右邊就會空出一片空間，空間的長寬與浮動元素長寬相同。總結總結下來，浮動與清除浮動的順序關系如下設置元素浮動，元素脫離文檔流，不計算高度。
本文主要探討兩個問題：
為什么CSS設置浮動會引起父元素塌陷
為什么設置clear:both能清除浮動，并撐開父元素。
起因CSS的浮動，算是我在寫網頁時用的最多的屬性之一。但要說我對浮動的了解程度的話，只能說“知其然而不知其所以然”。雖然很多人都說浮動會用就行，但是要想成為一個優秀的前端，對這些常用屬性得知根知底。
恰巧在慕課網，張鑫旭老師開了《CSS深入理解之float浮動》這門課。鏈接在文末，有興趣的可以聽聽，老師講課風格很風趣……
Float的歷史Float設計的初衷，是為了實現文字環繞效果。就像下圖展示的一樣（圖片源于w3school）：
嗯，就這么簡單。
在這兒，我們用一個例子來說明子元素設置浮動，從而引起父元素高度塌陷的問題。
首先寫一個div，里面插入一張圖片。
我們再給div設置一個border，為了讓大家看的清楚。
CSS設置如下：
#div {
border: 5px solid red;
width: 600px;
}
最后效果是這樣的:
通過chrome控制臺，可以看到此時div的高度為464px。
接下來，我們給那張圖片添加浮動效果。
#div img{
float: left;
}
再看網頁，發現父元素已經塌陷了,之前的邊框也消失不見了，成為一條線了。
此時再去控制臺查看div的高度，高度為0px。
很多人把這個現象稱為浮動帶來的BUG。但從一開始Float的用途來思考：
“Float設計的初衷，是為了實現文字環繞效果。”
那么，在那遠古蠻荒的互聯網時代，要如何實現文字環繞圖片的效果呢？機智的程序員加入了Float屬性，也引入了子元素浮動，父元素高度塌陷的特性。
看到這句話的時候，我思考了很久。因為無法理解父元素高度塌陷為何能讓文字環繞圖片。于是把視頻來來回回看了十多遍，又手寫了個demo，總算理解了。
總結來說，核心要點在于一句話：
“浮動元素會脫離文檔流。”
至于文檔流是啥，我這兒就不介紹了。但浮動的元素脫離了文檔流，所以是不計算高度的。
在此，我們加入一段話，看看div的高度。
從圖中可以看出，div因為段落的加入，高度被撐開了。
所以子元素浮動引起父元素高度塌陷的原因如下：
因為沒有預先設置div高度，所以div高度由其包含的子元素高度決定。而浮動脫離文檔流，所以圖片并不會被計算高度。此時的div中，相當于div中子元素高度為0，所以發生了父元素高度塌陷現象。
那么，文字環繞效果是如何實現的？
其實講起來也很簡單，因為父元素高度塌陷，所以文字會按正常順序排列，無視圖片高度。而圖片寬帶又還在，所以實現了文字環繞效果。
介紹完浮動，自然要介紹清除浮動。在此，我們不具體的去探討各種清除浮動的方式。而是去探討，為何設置clear:both能清除浮動，并撐開父元素。
clear:both的作用clear:both的作用，對各位來說可以算是耳熟能詳了。至于clear的left,right等屬性，我們這兒就不一一列舉了。
在父元素內的底部，加入這一行代碼。看圖易知，父元素因為子元素設置浮動而高度塌陷的問題，已經被解決了。
然后如果只是會用clear:both，又怎么能滿足我的求知欲呢？相比與這行代碼產生的作用，我更關心為什么這行代碼能清除浮動。
對此，我繼續翻閱文檔。
在w3school中，clear的定義如下：
clear 屬性規定元素的哪一側不允許其他浮動元素。
當然，這樣看，還是很難理解為什么clear能清除浮動并撐開父元素高度。那我們舉個栗子！
當先聲明一個元素A向左浮動時，由于脫離文檔流，這個元素的右邊就會空出一片空間，空間的長寬與浮動元素長寬相同。
然后我們再聲明另外一個元素B，如果元素A右側空出的空間內，還能放下元素B的話，那么元素B就會自動補上去。
下面我寫一個demo，應該就很好理解了。
HTML部分如下：
I"m divA
//此處用pI"m divB //用span，防止兩個都是p，不能展現父元素塌陷效果。
CSS部分如下：
#div {
border:5px solid red;
width:400px;
}
#a {
background:rgba(149, 149, 149, 0.42); // 為了方便演示，A的背景色設置成半透明。
width:200px;
float: left;
}
#b {
background: #6EEBC1;
width:300px;
}
效果圖長這樣：
從圖上可以看到，元素B的一部分是在元素A空出的空間內的。并且I"m divB這句話在元素A的右側。且父元素高度塌陷，父元素現在的高度就是元素B的高度。
那么如果元素A右側空出的空間內，放不下元素B呢？
我們把元素B寬度調整為200px。
可以看出，元素B就自成一行了。
給元素B加入clear:both后，元素B將忽略左邊浮動所產生的空間，不去補空缺。
如圖所示，元素B會另起一行。而不是縮到浮動產生的空間內。
在w3school中，clear的定義中還有這么一句話：
“在 CSS2.1 中，會在設置清除浮動的元素上外邊距之上增加清除空間，而外邊距本身并不改變。”
也就是說，因為浮動而產生的空白空間，會被填充為實際存在的空間。。那么，自然就能撐開父元素。
總結總結下來，浮動與清除浮動的順序關系如下：
設置元素A浮動，元素脫離文檔流，不計算高度。父元素出現高度塌陷。
浮動元素A產生空白空間。空間長寬等于元素A的長寬。后面元素會自動補空缺。
給浮動元素之后的元素B設置clear:both，元素B將不去補空缺。
元素B不僅不補空缺，還會把元素A因浮動而產生的空白空間填充為實際空間。
實際空間被計算高度，父元素被撐開。
這么一番走下來，花了很多時間去思考，去寫demo。但對CSS浮動的理解也加深了。浮動為何引起父元素塌陷和清除浮動為何能撐開父元素這兩個問題，一直是我的盲點。所以這次寒假，集中了兩天時間去攻克它（除夕和正月初一，大過年的寫代碼，感覺有點怪但效率卻出奇的高……）。
參考鏈接：
《CSS深入理解之float浮動》-- 張鑫旭（也是課程地址）
CSS clear 屬性
clear:both 為什么不起作用？--知乎，田雅文的回答
前端路漫漫，且行且歌。
最后附上本人博客地址和原文鏈接，希望能與各位多多交流。
Lxxyx的前端樂園
原文鏈接：寒假前端學習(8)——理解CSS浮動與清除浮動
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115042.html
摘要：浮動為什么會有文本環繞效果產生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。 作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。 本文主要討論以下幾個問題：1.浮動的原始用途...
摘要：浮動為什么會有文本環繞效果產生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。 作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。 本文主要討論以下幾個問題：1.浮動的原始用途...
摘要：浮動元素會從文檔的正常流簡稱文檔流中脫離，但仍會影響布局。五清除浮動和中對工作是這樣描述的增加元素的上外邊距，使之最后落在浮動元素的下面。清除區域時在元素的上外邊距增加的額外間隔，不允許任何浮動元素進入這個范圍內。 內容預覽 包含塊 浮動元素的特性 浮動元素的擺放規則 浮動元素的幾種行為 清除浮動 一、包含塊 所有元素的布局都是依賴于包含塊的。 舉個例子來說 ...
閱讀 910·2021-09-22 15:17
閱讀 1943·2021-09-22 15:06
閱讀 2228·2021-09-08 09:35
閱讀 5115·2021-09-01 11:43
閱讀 3487·2019-08-30 15:55
閱讀 2161·2019-08-30 12:48
閱讀 3160·2019-08-30 12:45
閱讀 1791·2019-08-29 17:31
