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