css 簡析folat

1.float??

不知道你們是否還記得以前咱們講過頁面是文檔流，具體什麼是文檔流，我就不說了？因而咱們頁面佈局若是用div的話，那麼塊狀的元素是怎麼排列的，什麼叫塊狀本身去看?

若是咱們呢用div佈局的話，可能會遇到一個問題?

你們見沒有。若是我想把xxxxx放到和Box-1排在一塊兒，我應該怎麼搞啊?可能你會說前面咱們已經說了用定位能夠解決，可是今天咱們講的是用float,來實現你們來看看咱們若是加上float是否是就實現了?

真能夠啊?開心徹底知足了咱們的要求。其實咱們在實際裏面也常用float來橫向排版、或者多列布局。其實這個裏面有一個問題?不知道你們注意沒有，其實使用浮動元素脫離了常規文檔流以後，注意：實際上是原來緊跟其後的元素就會在空間容許的狀況下，向上提高到與浮動元素平齊平座。

若是你看過W3標準的話，你可能發現這個怎麼和實際不太同樣（咱們指使用場景上面）

float 屬性定義元素在哪一個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素均可以浮動。浮動元素會生成一個塊級框，而不論它自己是何種元素。m ,

既然說到文字環繞的話，咱們用一句形象的話他是如何實現的。你在浮動一張圖片或者其餘元素時，你是在要求瀏覽器把它往上方推，直到他碰到父元素的內邊界。後面的段落再也不認爲浮動元素在文檔流中位置於他的前面了。於是他會佔據父元素左上角的位置。文字環繞開。

那麼float 有哪些特性了?

包裹性.破壞性

什麼是包裹性?

若是我添加了folat:又會變成什麼樣子了?

你們能不可以看到明顯的區別啊。這個盒子的區別是什麼啊?其實這個時候：若是給div增長float:left以後，它忽然變得緊湊了，寬度發生了變化，把內容「王福朋」三個字包裹了——這就是包裹性。div設置了float以後，其寬度會自動調整爲包裹住內容寬度，而不是撐滿整個父容器 注意，此時div雖然體現了包裹性，可是它的display樣式是沒有變化的，仍是block。display:inline-block 與float的區別是什麼？float沒法等同於display:inline-block，其中緣由之一就是浮動的方向性，display:inline-block僅僅一個水平排列方向，就是從左往右，而float能夠從右往左排列，這就是二者的差別。然而，咱們又有多少狀況須要元素從右往左排列呢？不多，因此，CSS中，沒有浮動這一屬性不是什麼大不了的事情，它其實就那麼回事。

破壞性：（這個是照抄地址http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/）感受比我講的好就借鑑了

2. 浮動的「破壞性」
浮動能夠說是全部CSS屬性中的「破壞之王」。要理解浮動的破壞性，咱們要從浮動最原始的意義入手。我在上面把浮動的原始意義用粗斜體表示出來了，就是「只是用來讓文字環繞圖片而已，僅此而已。」

因此，只要您弄明白了爲何文字會環繞含浮動屬性的圖片，您就會知道我所說的浮動的「破壞性」是什麼意思了。//下面這部份內容是本文核心，多我的觀點，我儘可能表述清楚。您如有興趣，能夠放慢在這裏的閱讀速度。

先說結論：文字之因此會環繞含有float屬性的圖片時由於浮動破壞了正常的line boxes。

這裏有必要先講講line boxes模型。先看下面一段普通的HTML代碼：

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

這段HTML代碼涉及到4種boxes：
一、首先是p標籤所在的containing box，此box包含了其餘的boxes；

二、而後就是inline boxes，以下圖標註，

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

三、line boxes，見下圖的標註：

在containing boxes裏，一個一個的inline boxes組成了line boxes。這是浮動影響佈局的關鍵box類型，下面會詳細闡述。

四、content area，見下圖標註：

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

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

上圖中，圖片爲一個inline boxes，兩邊的文字也是inline boxes。因爲line boxes的高度是由其內部最高的inline boxes的高度決定的，因此這裏line boxes的高度就是圖片的高度。此時圖片與文字是同一box類型的元素（都是inline boxes），是在同一行上的，因此，默認狀態下，一張圖片只能與一行文字對齊。而要想讓一張圖片要與多行文字對齊，您惟一能作的就是破壞正常的line boxes模型。

含有浮動屬性的圖片與文字
先看一下圖片添加了float:left樣式後的表現，見下圖：

剛纔說過，正常狀況下，圖片自身就是個inline boxes，與兩側的文字inline boxes共同組成了line boxes，可是，一旦圖片加入了浮動，狀況就徹底變了。我認爲是浮動完全破壞了img圖片的inline boxes特性，至少有一點我能夠確定，圖片的inline boxes不存在了，被惡魔附體，變身了，而這個惡魔就是浮動。一旦圖片失去了inline boxes特性就沒法與inline boxes的文字排在一行了，其會從line boxes上脫離出來，跟隨自身的方位屬性，靠邊排列。這種狀態跟限制性內切酶起做用幾乎一致，一條基因鏈上(line boxes)有不少的基因(inline boxes)，而後限制性內切酶(float)會切除特定的DNA序列，此序列(float元素)就會從基因鏈上脫離出來。

這個從line boxes上脫離的浮動元素其實就是一個軀體，一個空殼子，表象。由於其沒有inline boxes。有人可能會問，沒有inline boxes就沒有唄，有什麼大不了的？非也非也！這個inline boxes很個很重要的概念。我曾在「css行高line-height的一些深刻理解及應用」一文中提到太高度的本質，這裏有必要再講一遍。

在目前的CSS的世界中，全部的高度都是有兩個CSS模型產生的，一個是box盒狀模型，對應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也破壞了，因而這些元素也就沒有了高度。

咱們所處的這個世界時須要壞人來維持平衡的。武俠世界裏不是常有要消滅某個超牛叉的大魔頭時，會有人修煉魔功與之抗衡嘛。浮動彷佛就是這樣的一個角色，在網頁最初的時候就是顯示一些圖片的文字啊什麼的，所須要的佈局也就那麼幾個，其中之一就是文字環繞圖片顯示了，但是怎麼實現這樣的效果呢？聰明的CSS開發者就創造了一個修煉「魔功」的float屬性，其做用就是破壞line boxes模型好讓文字環繞圖片顯示，最後實現了嗎？確實實現了。還記得我屢次說到的浮動的意義嗎——只是用來讓文字環繞圖片而已，而要實現這個就須要用到浮動的「破壞性」。

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

文字環繞圖片顯示的緣由
先看下面的flash動畫演示（點擊按鈕開始）：

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

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

咱們能夠拿浮動元素與絕對定位元素作對比或許能夠幫助理解。與浮動元素同樣，絕對定位元素也具備「包裹性」，此「包裹性」適用於任何元素。那麼，浮動元素與絕對定位元素的差異在哪裏呢？我以爲最主要的差異在於：絕對定位的元素脫離了文檔流，而浮動元素依舊在文檔流中；而這形成的顯示上的差別就是：同處於文檔流中的文字實體不會與浮動元素重疊，而會與絕對定位元素重疊。這就是文字環繞顯示的重要緣由之一：雖然圖片實際佔據的高度爲0，可是因爲其寬度實體存在（包裹性），一樣是content area 實體的文字不會與之重疊（外部的容器盒子containing box(p,div,ul,li)會重疊），這就比如籃球場上站了個植物人，雖然其幾乎不可能得分，運球之類，可是他的實體在那裏，它能夠阻擋同一水平空間上的同一類型的個體（即人）直接穿過去，要經過，得繞道。可是其沒法阻擋整個球隊的向前推動。見下圖（firebug顯示截圖）：