CSS float浮動的深刻研究、詳解及拓展(一)

概念目錄

• 我的感悟之CSS代碼的情感化思惟
• 我的觀點之浮動的意義僅僅是文字環繞顯示而已
• 我的觀點之浮動的本質是「包裹及破壞」
• 我的觀點之目前大多數浮動應用都不是浮動應該作的
• 我的觀點之浮動實際上是個魔鬼、混球

1、引言

你我看待事物的方式不一樣，價值取向也不一樣，由於咱們有着不一樣的世界觀，價值觀。這種世界觀的差別不只僅體如今實際的生活中，也反映在代碼上。你我看待代碼的方式，或者說是代碼在咱們情感層面的位置是不同的，我這裏說的是情感層面，與邏輯無關，與算法無關（雖然算法受情感影響）。這種看待代碼的方式是咱們在不斷學習與工做的過程當中積累出來的，是在潛意識層面逐漸積累起來的，一切悄然而至，不知不覺。當咱們積累到必定階段後，會忽然發現，關於代碼，咱們已經造成了本身的世界觀和屬於本身的準則。回到我剛提到的「情感層面」，這個詞也能夠用「感性思惟」來代替。一般而言，程序-代碼屬於很理性很邏輯的東西，與感性-情感這類詞搭不上邊，可是CSS例外。CSS也屬於代碼範疇，並且是一種偉大的代碼，其有別於C，JAVA之類程序語言——沒有算法，沒有複雜的邏輯。因而，CSS有了先天的優點能夠滲入一些感性的情感化的東西。正如我上面說起的，大多數狀況下，這種滲入是無心識的（除非有人直接表露——就像我如今所作的），而且是個體差別明顯的（由於是專屬於本身的情感化的東西）。弗洛伊德將人格劃分爲無心識、前意識和意識，我發現代碼的情感化思惟造成正是走的從無心識到前意識到意識的路線，因此我我的認爲：情感化的代碼也屬於人格的一部分。因而，有了「CSS-情感化代碼-人格」這一微妙的關係。

我不清楚他人是如何看待CSS的，CSS的這些屬性在他們心中是個什麼東西，他們到底賦予了多少自身的情感（或人格或品性或特質等）在這些代碼身上，他們是否已經意識到這些CSS屬性身上正一點一點地融入他們情感化的一些東西。但我清楚本身，在這些CSS的屬性身上添加了不少我的的色彩，這種情感化的東西能夠說讓我更好的理解CSS，我想這不難理解，舉個例子：假設你將每一個CSS屬性看作是你的孩子，每一個孩子有着不一樣的性格，隨着學習你會挖掘到更多的一些性格，這就比如母親看着本身的孩子一點點長大，到了必定的程度就會把本身的孩子的性格摸得一清二楚，管教也就從容了。固然，我並無對CSS全部的屬性都有很清晰的情感化的理解，我用CSS才幾年啊，我要學的還有不少。可是，對於CSS中經常使用的float屬性，我仍是有些感受的，這也是本文的主旨所在。本文將會從個人一些感性的認識的角度講解CSS float屬性。因此，這裏，你會看到別樣的技術文章。

2、浮動的情感化認識

我對浮動感性化的認識：浮動就是一個變態，魔鬼，自私自利且影響他人的混球。我討厭浮動。

3、浮動的原始意義是什麼？

咱們使用float浮動作了不少其本職工做之外的事情，因而咱們會混淆，咱們會回看不清float真正的面目。浮動真正的意義在哪裏呢？要知道這個問題的答案很簡單，假設如今CSS中沒有浮動(float)屬性，那麼會變成一個什麼樣子。咱們會發現，目前流行採用浮動方法實現的不管是分欄佈局，仍是列表排列咱們均可以用其餘一些CSS屬性（不考慮table）代替實現，惟一一個實現不了的就是「文字環繞圖片」，我是想不出來能有什麼方法可讓文字環繞圖片顯示。好，這個替代不了的做用纔是float真正的意義所在。此做用相似於word中的版式，很基礎的原始的做用：

例如左邊這張word截圖就含有左浮動屬性(float:left)，這纔是浮動應該作的事情。這是很是重要的結論，這是深刻理解浮動屬性的基礎，咱們後面探討的一些浮動相關的問題均可以由這裏引伸出來，因此，請記住，浮動出現的意義其實只是用來讓文字環繞圖片而已，僅此而已。而咱們目前用浮動實現頁面佈局本不是浮動該乾的事情。

4、浮動的本質是什麼？

我將浮動的本質定義爲「包裹與破壞」！

1. 浮動的「包裹性」
先說句您應該沒有見過的結論：撇開浮動的「破壞性」，浮動就是個帶有方位的display:inline-block屬性。

display:inline-block某種意義上的做用就是包裹(wrap)，而浮動也有相似的效果。舉個常見例子，或許您有實現寬度自適應按鈕的經驗，實現寬度自適應的關鍵就是要讓按鈕的大小自適應於文字的個數，這就須要按鈕要自動包裹在文字的外面。咱們用什麼方法實現呢？一就是display:inline-block；二就是float。例如咱們要實現新浪博客中的「發表文章」之類的寬度自適應按鈕（以下圖）:

背景圖片爲：

display:inline-block方法

CSS代碼以下：

.btn1{display:inline-block; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat left top; padding-left:3px; color:#000000; font-size:12px; text-decoration:none;}
.btn1 cite{display:block; line-height:26px; padding:0 13px 0 10px; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat right top;}

HTML代碼以下：

<a href="javascript:void(0);" class="btn1"><cite>inline-block方法</cite></a>

結果以下圖：

float:left方法
此方法的CSS代碼與上面的inline-block方法惟一不一樣之處就在於這裏是float:left;

CSS代碼以下：

.btn1{float:left; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat left top; padding-left:3px; color:#000000; font-size:12px; text-decoration:none;}
.btn1 cite{display:block; line-height:26px; padding:0 13px 0 10px; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat right top;}

HTML代碼以下：

<a href="javascript:void(0);" class="btn1"><cite>float方法</cite></a>

結果以下圖：

您能夠狠狠地點擊這裏：按鈕寬度自適應demo

上面這個例子旨在說明浮動屬性（不管是左浮動仍是右浮動）某種意義上而言與display:inline-block屬性的做用是如出一轍的，因此相似於display:block; float:left;的CSS代碼超過95%的狀況是沒有道理的(display:block是多餘的)。然而，float沒法等同於display:inline-block，其中緣由之一就是浮動的方向性，display:inline-block僅僅一個水平排列方向，就是從左往右，而float能夠從右往左排列，這就是二者的差別。然而，咱們又有多少狀況須要元素從右往左排列呢？不多，因此，CSS中，沒有浮動這一屬性不是什麼大不了的事情，它其實就那麼回事。

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顯示截圖）：

簡短的小結
雖然嘮嘮叨叨說了這麼多，可是我我的以爲仍是沒有講清楚，由於這裏面涉及的東西都是看不見的，不少概念性的抽象的東西，即便我作了動畫，也配了圖，可是仍是以爲沒有講得很明白。尤爲我所說的浮動元素沒有高度，「你看，那圖片實實在在就在那兒，怎麼沒有高度？沒有高度爲何文字會繞行？」因此我免不了在實際高度與inline boxes的關係這類概念間折騰，越折騰顯得越亂。不過沒有關係，下面我會根據上面的講解分析浮動元素各類各樣的表現，相信會對浮動的深刻理解有更多的幫助。本文僅完成了三分之一，內容較多，我要分篇發佈。

(未完待續…)

轉載自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]