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

資訊專欄INFORMATION COLUMN

css float的深入研究

Tony / 1029人閱讀

摘要：去年就看到張?chǎng)涡翊笊竦倪@篇文章，看了好幾遍才看懂。而對(duì)于使用脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會(huì)無(wú)視它。而這造成的顯示上的差異就是文檔流中的文字實(shí)體不會(huì)與浮動(dòng)元素重疊，而會(huì)與絕對(duì)定位元素重疊。

去年就看到張?chǎng)涡翊笊竦倪@篇文章，看了好幾遍才看懂。后來(lái)再去想其中的一些原理，又忘了。于是打算把它記下來(lái)，一來(lái)做個(gè)備份，二來(lái)希望與君共勉。

這里我對(duì)文章以自己的理解做了一些精簡(jiǎn)，完整版的可以去http://www.zhangxinxu.com/wor...這里看

浮動(dòng)的本質(zhì)是：包裹性和破壞性 
包裹性：換種說(shuō)法就是讓元素inline-block化，例如一個(gè)div標(biāo)簽?zāi)J(rèn)寬度是100%顯示的，但是一旦設(shè)置了float，則100%默認(rèn)寬度就會(huì)變成自適應(yīng)內(nèi)部元素的寬度。
其實(shí)float就是一個(gè)帶有方向的display:inline-block屬性


破壞性：如果我們要理解浮動(dòng)的破壞性，我們就要從浮動(dòng)最原始的意義入手。浮動(dòng)出現(xiàn)的意義其實(shí)只是用來(lái)讓文字環(huán)繞圖片而已，僅此而已。

浮動(dòng)之所以會(huì)環(huán)繞含有float屬性的圖片是因?yàn)楦?dòng)破壞了正常的line boxes
我們先來(lái)了解一下line boxes模型。先看下面的一段普通的HTML代碼：

這是一行普通的文字，這里有個(gè) em 標(biāo)簽。
代碼中的4種boxes(順序從里到外)：

inline boxes：

?

inline boxes不會(huì)讓內(nèi)容成塊顯示，而是排成一行，如果外部含inline屬性的標(biāo)簽(span,a,cite等)，則屬于inline boxes，如果是個(gè)光禿禿的文字，則屬于匿名inline boxes

line boxes：

一個(gè)一個(gè)的inline boxes組成了line boxes.這是浮動(dòng)影響布局的關(guān)鍵box類型

content area：

content area是一種圍繞文字看不見的box.content area的大小與font-size大小相關(guān)

containing box：

p標(biāo)簽所在的containing box，此box包含了其他的boxes
為什么浮動(dòng)能使文字環(huán)繞圖片？

默認(rèn)情況下，圖片與文字混排應(yīng)該是這個(gè)樣子：圖片與文字基線對(duì)齊，圖片與文字在同一行上，如下圖所示：

上圖中，圖片為一個(gè)inline boxes,兩邊文字也是inline boxes。由于line boxes的高度是由其內(nèi)部最高的inline boxes的高度決定的，所以這里的line boxes的高度就是圖片的高度


此時(shí)圖片與文字是同一box類型的元素，是在同一行上的，所以，默認(rèn)狀態(tài)下，一張圖片只能與一行文字對(duì)齊。而要想讓一張圖片要與多行文字對(duì)齊，您唯一能做的就是破壞正常的line boxes模型
含有浮動(dòng)屬性的圖片與文字

先看一下圖片添加了float:left樣式后的表現(xiàn)，見下圖：

正常情況下，圖片自身就是個(gè)inline-boxes，與兩側(cè)的文字inline-boxes共同組成了line-boxes，但是一旦圖片加入了浮動(dòng)，情況就完全變了。浮動(dòng)徹底破壞了圖片的inline-boxes特性，至少有一點(diǎn)可以肯定，圖片的inline-boxes不存在了


一旦圖片失去了inline-boxes特性就無(wú)法與inline-boxes的文字排在一行了，就會(huì)從line-boxes上脫離出來(lái)，跟隨自身的方向?qū)傩裕窟吪帕?/p>

這個(gè)從line boxes上脫離的浮動(dòng)元素其實(shí)就是一個(gè)軀體，一個(gè)空殼子，表象。因?yàn)槠錄]有inline boxes。有人可能會(huì)問，沒有inline boxes就沒有唄，有什么大不了的？非也非也！這個(gè)inline boxes很個(gè)很重要的概念

為什么inline-boxes很重要？ 
在目前的CSS的世界中，所有的高度都是有兩個(gè)CSS模型產(chǎn)生的，一個(gè)是盒子模型，對(duì)應(yīng)CSS為”height+padding+margin”，另外一個(gè)是line box模型，對(duì)應(yīng)樣式為”line-height”。前者的height屬性分為明顯的height值和隱藏的height值，所謂隱藏的height值是指圖片的高度，一旦載入一張圖片，其內(nèi)在的height值就會(huì)起作用，即使您看不到”height”這個(gè)詞


而后者針對(duì)于文字等這類inline boxes的元素（圖片也屬于inline boxes，但其height比line-height作用更兇猛，故其inline boxes高度等于其自身高度，對(duì)line-height無(wú)反應(yīng)），inline boxes的高度直接受line-height控制（改變line-height文字拉開或重疊就是這個(gè)原因），而真正的高度表現(xiàn)則是由每行眾多的inline boxes組成的line boxes（等于內(nèi)部最高的inline box的高度），而這些line boxes的高度垂直堆疊形成了containing box的高度，也就是我們見到的div或是p標(biāo)簽之類的高度了


所以，對(duì)于line box模型的元素而言，沒有inline boxes，就沒有高度了，而浮動(dòng)卻恰恰做了這么齷齪的事情，其直接將元素的inline boxes也破壞了，于是這些元素也就沒有了高度


沿用上面圖片的例子。浮動(dòng)破壞了圖片的inline box，產(chǎn)生了兩個(gè)結(jié)果：一是圖片無(wú)法與文字同行顯示，脫離了其原來(lái)所在的line box鏈；二是沒有了高度（無(wú)inline box -> 無(wú)line box -> 無(wú)高度）。而這些結(jié)果恰恰是文字環(huán)繞圖片顯示所必須的
文字環(huán)繞圖片顯示的原因

這里有個(gè)動(dòng)畫，可以很好的幫助我們理解文字環(huán)繞圖片顯示的原因：http://image.zhangxinxu.com/f...

動(dòng)畫所演示的關(guān)鍵點(diǎn)其實(shí)就是上面的一系列分析與講解，即“包裹與破壞”！包裹是讓標(biāo)簽占據(jù)的空間水平收縮，破壞是破壞的inline box。正如上面講解的，inline boxes是高度形成的基礎(chǔ)，浮動(dòng)破壞了inline boxes也就沒有高度可言了。正是由于浮動(dòng)元素沒有了inline boxes，沒有了inline boxes高度，才能讓其他inline boxes元素重新整合，環(huán)繞浮動(dòng)元素排列


我們現(xiàn)在假設(shè)浮動(dòng)沒有破壞inline boxes，那么雖然圖片會(huì)靠左顯示，但是其會(huì)與文字形成新的高度包絡(luò)線（同類聚合），且只能與一行文字形成line box，無(wú)法實(shí)現(xiàn)文字環(huán)繞效果，所以浮動(dòng)破壞inline boxes是必須的
浮動(dòng)(float) vs 絕對(duì)定位(absolute)

了解了浮動(dòng)之后，我們來(lái)對(duì)比一下絕對(duì)定位

與浮動(dòng)元素一樣，絕對(duì)定位元素也具有"包裹性"和"破壞性"，并適用于任何元素，那么他們之間有什么區(qū)別呢？

使用float脫離文檔流時(shí)，其他盒子會(huì)無(wú)視這個(gè)元素，但其他盒子內(nèi)的文本依然會(huì)為這個(gè)元素讓出位置，環(huán)繞在周圍。


而對(duì)于使用absolute脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會(huì)無(wú)視它。


而這造成的顯示上的差異就是：文檔流中的文字實(shí)體不會(huì)與浮動(dòng)元素重疊，而會(huì)與絕對(duì)定位元素重疊。這就是文字環(huán)繞顯示的重要原因之一：雖然圖片實(shí)際占據(jù)的高度為0，但是由于其寬度實(shí)體存在（包裹性），同樣是content area實(shí)體的文字不會(huì)與之重疊（外部的容器盒子containing box(p,div,ul,li)會(huì)重疊），這就好比籃球場(chǎng)上站了個(gè)植物人，雖然其幾乎不可能得分，運(yùn)球之類，但是他的實(shí)體在那里，它可以阻擋同一水平空間上的同一類型的個(gè)體（即人）直接穿過(guò)去，要通過(guò)，得繞道。但是其無(wú)法阻擋整個(gè)球隊(duì)的向前推進(jìn)
觀后感

每次看這篇文章都有不同的感悟，張?chǎng)涡翊笊駥?duì)很多問題的理解非常深刻和獨(dú)到，很欣賞他的文章。這篇文章中還有好幾個(gè)知識(shí)點(diǎn)需要深入理解，比如css行高line-height的一些深入理解及應(yīng)用，absolute的深入理解系列，我會(huì)找個(gè)時(shí)間整理一下，有興趣的伙伴也可以去看下

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

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

相關(guān)文章

  • CSS 最核心的幾個(gè)概念

    摘要：本文將講述中最核心的幾個(gè)概念，包括盒模型等。塊級(jí)元素的默認(rèn)為，而內(nèi)聯(lián)元素則是根據(jù)其自身的內(nèi)容或子元素來(lái)決定其寬度。如果該元素的下一個(gè)兄弟元素中有內(nèi)聯(lián)元素通常是文字，則會(huì)圍繞該元素顯示，形成類似文字圍繞圖片的效果。 本文將講述 CSS 中最核心的幾個(gè)概念，包括：盒模型、position、float等。這些是 CSS 的基礎(chǔ)，也是最常用的幾個(gè)屬性，它們之間看似獨(dú)立卻又相輔相成。為了掌握它們...

    SwordFly 評(píng)論0 收藏0

  • CSS魔法堂：說(shuō)說(shuō)Float那個(gè)被埋沒的志向

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

    legendmohe 評(píng)論0 收藏0

  • 浮動(dòng)(Floats)原理與清除浮動(dòng)

    摘要：父元素的頂端會(huì)限制浮動(dòng)元素防止一直浮動(dòng)到頁(yè)面頂端。例子戳這里清除浮動(dòng)清除浮動(dòng)的目的是為了解決高度塌陷的問題撐開浮動(dòng)父元素。原理會(huì)在元素的之上增加一個(gè)清除區(qū)域這個(gè)區(qū)域會(huì)在元素的上增加額外間隔并且不允許浮動(dòng)元素進(jìn)入這個(gè)區(qū)域。 浮動(dòng)概念 浮動(dòng)元素會(huì)脫離文檔的普通流,根據(jù)float的值向左或向右移動(dòng),直到它的外邊界碰到父元素的內(nèi)邊界或另一個(gè)浮動(dòng)元素的外邊界為止。由于浮動(dòng)框不在文檔的普通流中,所...

    andong777 評(píng)論0 收藏0

  • CSS基礎(chǔ)知識(shí)之float

    摘要：前段時(shí)間寫過(guò)一篇基礎(chǔ)知識(shí)之，當(dāng)時(shí)對(duì)的理解不太準(zhǔn)確，被慕課網(wǎng)多名讀者指出原文已修正，如有誤導(dǎo)實(shí)在抱歉。浮動(dòng)的基礎(chǔ)知識(shí)浮動(dòng)有個(gè)屬性左浮動(dòng)右浮動(dòng)不浮動(dòng)繼承。浮動(dòng)元素脫離了標(biāo)準(zhǔn)文檔流，文字和行級(jí)元素會(huì)環(huán)繞該元素，塊級(jí)元素則不受影響。 前段時(shí)間寫過(guò)一篇CSS基礎(chǔ)知識(shí)之position，當(dāng)時(shí)對(duì)float的理解不太準(zhǔn)確，被慕課網(wǎng)多名讀者指出（原文已修正，如有誤導(dǎo)實(shí)在抱歉）?，F(xiàn)對(duì)float進(jìn)行更深入的...

    wuyangchun 評(píng)論0 收藏0

  • 理解CSS浮動(dòng)與清理

    摘要：浮動(dòng)為什么會(huì)有文本環(huán)繞效果產(chǎn)生這個(gè)疑問主要來(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è)問題：1.浮動(dòng)的原始用途...

    Tonny 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<