成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

理解CSS浮動與清除浮動

劉東 / 3162人閱讀

摘要：那我們舉個栗子當(dāng)先聲明一個元素向左浮動時，由于脫離文檔流，這個元素的右邊就會空出一片空間，空間的長寬與浮動元素長寬相同?？偨Y(jié)總結(jié)下來，浮動與清除浮動的順序關(guān)系如下設(shè)置元素浮動，元素脫離文檔流，不計算高度。

本文主要探討兩個問題：

為什么CSS設(shè)置浮動會引起父元素塌陷

為什么設(shè)置clear:both能清除浮動，并撐開父元素。

起因

CSS的浮動，算是我在寫網(wǎng)頁時用的最多的屬性之一。但要說我對浮動的了解程度的話，只能說“知其然而不知其所以然”。雖然很多人都說浮動會用就行，但是要想成為一個優(yōu)秀的前端，對這些常用屬性得知根知底。

恰巧在慕課網(wǎng)，張鑫旭老師開了《CSS深入理解之float浮動》這門課。鏈接在文末，有興趣的可以聽聽，老師講課風(fēng)格很風(fēng)趣……

Float的歷史

Float設(shè)計的初衷，是為了實現(xiàn)文字環(huán)繞效果。就像下圖展示的一樣（圖片源于w3school）：

嗯，就這么簡單。

Float引起的父元素高度塌陷BUG？

在這兒，我們用一個例子來說明子元素設(shè)置浮動，從而引起父元素高度塌陷的問題。
首先寫一個div，里面插入一張圖片。

我們再給div設(shè)置一個border，為了讓大家看的清楚。
CSS設(shè)置如下：

#div {
  border: 5px solid red;
  width: 600px;
}

最后效果是這樣的:

通過chrome控制臺，可以看到此時div的高度為464px。

接下來，我們給那張圖片添加浮動效果。

#div img{
  float: left;
}

再看網(wǎng)頁，發(fā)現(xiàn)父元素已經(jīng)塌陷了,之前的邊框也消失不見了，成為一條線了。

此時再去控制臺查看div的高度，高度為0px。

不，不是BUG

很多人把這個現(xiàn)象稱為浮動帶來的BUG。但從一開始Float的用途來思考：

“Float設(shè)計的初衷，是為了實現(xiàn)文字環(huán)繞效果?！?/pre>

那么，在那遠古蠻荒的互聯(lián)網(wǎng)時代，要如何實現(xiàn)文字環(huán)繞圖片的效果呢？機智的程序員加入了Float屬性，也引入了子元素浮動，父元素高度塌陷的特性。
看到這句話的時候，我思考了很久。因為無法理解父元素高度塌陷為何能讓文字環(huán)繞圖片。于是把視頻來來回回看了十多遍，又手寫了個demo，總算理解了。


總結(jié)來說，核心要點在于一句話：


“浮動元素會脫離文檔流。”


至于文檔流是啥，我這兒就不介紹了。但浮動的元素脫離了文檔流，所以是不計算高度的。
在此，我們加入一段話，看看div的高度。

從圖中可以看出，div因為段落的加入，高度被撐開了。


所以子元素浮動引起父元素高度塌陷的原因如下：
因為沒有預(yù)先設(shè)置div高度，所以div高度由其包含的子元素高度決定。而浮動脫離文檔流，所以圖片并不會被計算高度。此時的div中，相當(dāng)于div中子元素高度為0，所以發(fā)生了父元素高度塌陷現(xiàn)象。

文字環(huán)繞效果的實現(xiàn)

那么，文字環(huán)繞效果是如何實現(xiàn)的？
其實講起來也很簡單，因為父元素高度塌陷，所以文字會按正常順序排列，無視圖片高度。而圖片寬帶又還在，所以實現(xiàn)了文字環(huán)繞效果。

清除浮動

介紹完浮動，自然要介紹清除浮動。在此，我們不具體的去探討各種清除浮動的方式。而是去探討，為何設(shè)置clear:both能清除浮動，并撐開父元素。

clear:both的作用

clear:both的作用，對各位來說可以算是耳熟能詳了。至于clear的left,right等屬性，我們這兒就不一一列舉了。




在父元素內(nèi)的底部，加入這一行代碼?？磮D易知，父元素因為子元素設(shè)置浮動而高度塌陷的問題，已經(jīng)被解決了。


然后如果只是會用clear:both，又怎么能滿足我的求知欲呢？相比與這行代碼產(chǎn)生的作用，我更關(guān)心為什么這行代碼能清除浮動。
對此，我繼續(xù)翻閱文檔。
在w3school中，clear的定義如下：


clear 屬性規(guī)定元素的哪一側(cè)不允許其他浮動元素。


當(dāng)然，這樣看，還是很難理解為什么clear能清除浮動并撐開父元素高度。那我們舉個栗子！
當(dāng)先聲明一個元素A向左浮動時，由于脫離文檔流，這個元素的右邊就會空出一片空間，空間的長寬與浮動元素長寬相同。
然后我們再聲明另外一個元素B，如果元素A右側(cè)空出的空間內(nèi)，還能放下元素B的話，那么元素B就會自動補上去。
下面我寫一個demo，應(yīng)該就很好理解了。
HTML部分如下：



  

    
I"m divA
 //此處用p
  

  

    I"m divB //用span，防止兩個都是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;
}


效果圖長這樣：


從圖上可以看到，元素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將忽略左邊浮動所產(chǎn)生的空間，不去補空缺。

如圖所示，元素B會另起一行。而不是縮到浮動產(chǎn)生的空間內(nèi)。

撐開父元素空間的奧秘

在w3school中，clear的定義中還有這么一句話：


“在 CSS2.1 中，會在設(shè)置清除浮動的元素上外邊距之上增加清除空間，而外邊距本身并不改變。”


也就是說，因為浮動而產(chǎn)生的空白空間，會被填充為實際存在的空間。。那么，自然就能撐開父元素。

總結(jié)

總結(jié)下來，浮動與清除浮動的順序關(guān)系如下：



設(shè)置元素A浮動，元素脫離文檔流，不計算高度。父元素出現(xiàn)高度塌陷。


浮動元素A產(chǎn)生空白空間?？臻g長寬等于元素A的長寬。后面元素會自動補空缺。


給浮動元素之后的元素B設(shè)置clear:both，元素B將不去補空缺。


元素B不僅不補空缺，還會把元素A因浮動而產(chǎn)生的空白空間填充為實際空間。


實際空間被計算高度，父元素被撐開。



這么一番走下來，花了很多時間去思考，去寫demo。但對CSS浮動的理解也加深了。浮動為何引起父元素塌陷和清除浮動為何能撐開父元素這兩個問題，一直是我的盲點。所以這次寒假，集中了兩天時間去攻克它（除夕和正月初一，大過年的寫代碼，感覺有點怪但效率卻出奇的高……）。


參考鏈接：


《CSS深入理解之float浮動》-- 張鑫旭（也是課程地址）
CSS clear 屬性
clear:both 為什么不起作用？--知乎，田雅文的回答


前端路漫漫，且行且歌。
最后附上本人博客地址和原文鏈接，希望能與各位多多交流。


Lxxyx的前端樂園
原文鏈接：寒假前端學(xué)習(xí)(8)——理解CSS浮動與清除浮動

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115042.html

相關(guān)文章

  • 理解CSS浮動與清理

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

    Tonny 評論0 收藏0

  • 理解CSS浮動與清理

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

    cyqian 評論0 收藏0

  • 浮動的一些探究

    摘要：浮動元素會從文檔的正常流簡稱文檔流中脫離，但仍會影響布局。五清除浮動和中對工作是這樣描述的增加元素的上外邊距，使之最后落在浮動元素的下面。清除區(qū)域時在元素的上外邊距增加的額外間隔，不允許任何浮動元素進入這個范圍內(nèi)。 內(nèi)容預(yù)覽 包含塊 浮動元素的特性 浮動元素的擺放規(guī)則 浮動元素的幾種行為 清除浮動 一、包含塊 所有元素的布局都是依賴于包含塊的。 舉個例子來說 ...

    LucasTwilight 評論0 收藏0

  • 浮動元素

    摘要：對于的清除浮動，一定要牢記這個規(guī)則只能影響使用清除的元素本身，不能影響其他元素。本例中的左邊有浮動元素，因此只要在的樣式中使用來指定元素左邊不允許出現(xiàn)浮動元素，這樣就被迫下移一行。對于右浮動也亦是如此。 塊級元素與行內(nèi)元素，怎么用CSS控制它們、以及如何合理的使用它們 它們的定義1.塊級元素：每個塊級元素默認占一行高度，若有塊級元素則同行無法再添加其他元素（float浮動除外）特點：高...

    Me_Kun 評論0 收藏0

  • 浮動元素

    摘要：對于的清除浮動，一定要牢記這個規(guī)則只能影響使用清除的元素本身，不能影響其他元素。本例中的左邊有浮動元素，因此只要在的樣式中使用來指定元素左邊不允許出現(xiàn)浮動元素，這樣就被迫下移一行。對于右浮動也亦是如此。 塊級元素與行內(nèi)元素，怎么用CSS控制它們、以及如何合理的使用它們 它們的定義1.塊級元素：每個塊級元素默認占一行高度，若有塊級元素則同行無法再添加其他元素（float浮動除外）特點：高...

    FWHeart 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<