css float的深刻研究

去年就看到張鑫旭大神的這篇文章，看了好幾遍纔看懂。後來再去想其中的一些原理，又忘了。因而打算把它記下來，一來作個備份，二來但願與君共勉。

這裏我對文章以本身的理解作了一些精簡，完整版的能夠去http://www.zhangxinxu.com/wor...這裏看

浮動的本質是：包裹性和破壞性

包裹性：換種說法就是讓元素inline-block化，例如一個div標籤默認寬度是100%顯示的，可是一旦設置了float，則100%默認寬度就會變成自適應內部元素的寬度。
其實float就是一個帶有方向的display:inline-block屬性

破壞性：若是咱們要理解浮動的破壞性，咱們就要從浮動最原始的意義入手。浮動出現的意義其實只是用來讓文字環繞圖片而已，僅此而已。

浮動之因此會環繞含有float屬性的圖片是由於浮動破壞了正常的line boxes
咱們先來了解一下line boxes模型。先看下面的一段普通的HTML代碼：

<p>這是一行普通的文字，這裏有個 <em>em</em> 標籤。</p>

代碼中的4種boxes(順序從裏到外)：

• inline boxes：



inline boxes不會讓內容成塊顯示，而是排成一行，若是外部含inline屬性的標籤(span,a,cite等)，則屬於inline boxes，若是是個光禿禿的文字，則屬於匿名inline boxes

• line boxes：

一個一個的inline boxes組成了line boxes.這是浮動影響佈局的關鍵box類型

• content area：

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

• containing box：

p標籤所在的containing box，此box包含了其餘的boxes

爲何浮動能使文字環繞圖片？

默認狀況下，圖片與文字混排應該是這個樣子：圖片與文字基線對齊，圖片與文字在同一行上，以下圖所示：

上圖中，圖片爲一個inline boxes,兩邊文字也是inline boxes。因爲line boxes的高度是由其內部最高的inline boxes的高度決定的，因此這裏的line boxes的高度就是圖片的高度

此時圖片與文字是同一box類型的元素，是在同一行上的，因此，默認狀態下，一張圖片只能與一行文字對齊。而要想讓一張圖片要與多行文字對齊，您惟一能作的就是破壞正常的line boxes模型

含有浮動屬性的圖片與文字

先看一下圖片添加了float:left樣式後的表現，見下圖：

正常狀況下，圖片自身就是個inline-boxes，與兩側的文字inline-boxes共同組成了line-boxes，可是一旦圖片加入了浮動，狀況就徹底變了。浮動完全破壞了圖片的inline-boxes特性，至少有一點能夠確定，圖片的inline-boxes不存在了

一旦圖片失去了inline-boxes特性就沒法與inline-boxes的文字排在一行了，就會從line-boxes上脫離出來，跟隨自身的方向屬性，靠邊排列

這個從line boxes上脫離的浮動元素其實就是一個軀體，一個空殼子，表象。由於其沒有inline boxes。有人可能會問，沒有inline boxes就沒有唄，有什麼大不了的？非也非也！這個inline boxes很個很重要的概念

爲何inline-boxes很重要？

在目前的CSS的世界中，全部的高度都是有兩個CSS模型產生的，一個是盒子模型，對應CSS爲」height+padding+margin」，另一個是line box模型，對應樣式爲」line-height」。前者的height屬性分爲明顯的height值和隱藏的height值，所謂隱藏的height值是指圖片的高度，一旦載入一張圖片，其內在的height值就會起做用，即便您看不到」height」這個詞

然後者針對於文字等這類inline boxes的元素（圖片也屬於inline boxes，但其height比line-height做用更兇猛，故其inline boxes高度等於其自身高度，對line-height無反應），inline boxes的高度直接受line-height控制（改變line-height文字拉開或重疊就是這個緣由），而真正的高度表現則是由每行衆多的inline boxes組成的line boxes（等於內部最高的inline box的高度），而這些line boxes的高度垂直堆疊造成了containing box的高度，也就是咱們見到的div或是p標籤之類的高度了

因此，對於line box模型的元素而言，沒有inline boxes，就沒有高度了，而浮動卻偏偏作了這麼齷齪的事情，其直接將元素的inline boxes也破壞了，因而這些元素也就沒有了高度

沿用上面圖片的例子。浮動破壞了圖片的inline box，產生了兩個結果：一是圖片沒法與文字同行顯示，脫離了其原來所在的line box鏈；二是沒有了高度（無inline box -> 無line box -> 無高度）。而這些結果偏偏是文字環繞圖片顯示所必須的

文字環繞圖片顯示的緣由

這裏有個動畫，能夠很好的幫助咱們理解文字環繞圖片顯示的緣由：http://image.zhangxinxu.com/f...

動畫所演示的關鍵點其實就是上面的一系列分析與講解，即「包裹與破壞」！包裹是讓標籤佔據的空間水平收縮，破壞是破壞的inline box。正如上面講解的，inline boxes是高度造成的基礎，浮動破壞了inline boxes也就沒有高度可言了。正是因爲浮動元素沒有了inline boxes，沒有了inline boxes高度，才能讓其餘inline boxes元素從新整合，環繞浮動元素排列

咱們如今假設浮動沒有破壞inline boxes，那麼雖然圖片會靠左顯示，可是其會與文字造成新的高度包絡線（同類聚合），且只能與一行文字造成line box，沒法實現文字環繞效果，因此浮動破壞inline boxes是必須的

浮動(float) vs 絕對定位(absolute)

瞭解了浮動以後，咱們來對比一下絕對定位

與浮動元素同樣，絕對定位元素也具備"包裹性"和"破壞性"，並適用於任何元素，那麼他們之間有什麼區別呢？

使用float脫離文檔流時，其餘盒子會無視這個元素，但其餘盒子內的文本依然會爲這個元素讓出位置，環繞在周圍。

而對於使用absolute脫離文檔流的元素，其餘盒子與其餘盒子內的文本都會無視它。

而這形成的顯示上的差別就是：文檔流中的文字實體不會與浮動元素重疊，而會與絕對定位元素重疊。這就是文字環繞顯示的重要緣由之一：雖然圖片實際佔據的高度爲0，可是因爲其寬度實體存在（包裹性），一樣是content area實體的文字不會與之重疊（外部的容器盒子containing box(p,div,ul,li)會重疊），這就比如籃球場上站了個植物人，雖然其幾乎不可能得分，運球之類，可是他的實體在那裏，它能夠阻擋同一水平空間上的同一類型的個體（即人）直接穿過去，要經過，得繞道。可是其沒法阻擋整個球隊的向前推動

觀後感

每次看這篇文章都有不一樣的感悟，張鑫旭大神對不少問題的理解很是深入和獨到，很欣賞他的文章。這篇文章中還有好幾個知識點須要深刻理解，好比css行高line-height的一些深刻理解及應用，absolute的深刻理解系列，我會找個時間整理一下，有興趣的夥伴也能夠去看下