概念目錄
個(gè)人感悟之CSS代碼的情感化思維 個(gè)人觀點(diǎn)之浮動(dòng)的意義僅僅是文字環(huán)繞顯示而已 個(gè)人觀點(diǎn)之浮動(dòng)的本質(zhì)是“包裹及破壞” 個(gè)人觀點(diǎn)之目前大多數(shù)浮動(dòng)應(yīng)用都不是浮動(dòng)應(yīng)該做的 個(gè)人觀點(diǎn)之浮動(dòng)其實(shí)是個(gè)魔鬼、混球
一、引言
你我看待事物的方式不同，價(jià)值取向也不同，因?yàn)槲覀冇兄煌氖澜缬^，價(jià)值觀。這種世界觀的差異不僅僅體現(xiàn)在實(shí)際的生活中，也反映在代碼上。你我看待代碼的方式，或者說(shuō)是代碼在我們情感層面的位置是不一樣的，我這里說(shuō)的是情感層面，與邏輯無(wú)關(guān)，與算法無(wú)關(guān)（雖然算法受情感影響）。這種看待代碼的方式是我們?cè)诓粩鄬W(xué)習(xí)與工作的過(guò)程中積累出來(lái)的，是在潛意識(shí)層面逐漸積累起來(lái)的，一切悄然而至，不知不覺(jué)。當(dāng)我們積累到一定階段后，會(huì)突然發(fā)現(xiàn)，關(guān)于代碼，我們已經(jīng)形成了自己的世界觀和屬于自己的準(zhǔn)則?；氐轿覄偺岬降摹扒楦袑用妗?，這個(gè)詞也可以用“感性思維”來(lái)代替。通常而言，程序-代碼屬于很理性很邏輯的東西，與感性-情感這類詞搭不上邊，但是CSS例外。CSS也屬于代碼范疇，而且是一種偉大的代碼，其有別于C，JAVA之類程序語(yǔ)言——沒(méi)有算法，沒(méi)有復(fù)雜的邏輯。于是，CSS有了先天的優(yōu)勢(shì)可以滲入一些感性的情感化的東西。正如我上面提及的，大多數(shù)情況下，這種滲入是無(wú)意識(shí)的（除非有人直接表露——就像我現(xiàn)在所做的），并且是個(gè)體差異明顯的（因?yàn)槭菍儆谧约旱那楦谢臇|西）。弗洛伊德將人格劃分為無(wú)意識(shí)、前意識(shí)和意識(shí)，我發(fā)現(xiàn)代碼的情感化思維形成正是走的從無(wú)意識(shí)到前意識(shí)到意識(shí)的路線，所以我個(gè)人認(rèn)為：情感化的代碼也屬于人格的一部分。于是，有了“CSS-情感化代碼-人格”這一微妙的關(guān)系。
我不清楚他人是如何看待CSS的，CSS的這些屬性在他們心中是個(gè)什么東西，他們到底賦予了多少自身的情感（或人格或品性或特質(zhì)等）在這些代碼身上，他們是否已經(jīng)意識(shí)到這些CSS屬性身上正一點(diǎn)一點(diǎn)地融入他們情感化的一些東西。但我清楚自己，在這些CSS的屬性身上添加了很多個(gè)人的色彩，這種情感化的東西可以說(shuō)讓我更好的理解CSS，我想這不難理解，舉個(gè)例子：假設(shè)你將每個(gè)CSS屬性看做是你的孩子，每個(gè)孩子有著不同的性格，隨著學(xué)習(xí)你會(huì)挖掘到更多的一些性格，這就好比母親看著自己的孩子一點(diǎn)點(diǎn)長(zhǎng)大，到了一定的程度就會(huì)把自己的孩子的性格摸得一清二楚，管教也就從容了。當(dāng)然，我并沒(méi)有對(duì)CSS所有的屬性都有很清晰的情感化的理解，我用CSS才幾年啊，我要學(xué)的還有很多。但是，對(duì)于CSS中常用的float屬性，我還是有些感覺(jué)的，這也是本文的主旨所在。本文將會(huì)從我的一些感性的認(rèn)識(shí)的角度講解CSS float屬性。所以，這里，你會(huì)看到別樣的技術(shù)文章。
二、浮動(dòng)的情感化認(rèn)識(shí)
我對(duì)浮動(dòng)感性化的認(rèn)識(shí)：浮動(dòng)就是一個(gè)變態(tài)，魔鬼，自私自利且影響他人的混球。我討厭浮動(dòng)。
三、浮動(dòng)的原始意義是什么？
我們使用float浮動(dòng)做了很多其本職工作以外的事情，于是我們會(huì)混淆，我們會(huì)回看不清float真正的面目。浮動(dòng)真正的意義在哪里呢？要知道這個(gè)問(wèn)題的答案很簡(jiǎn)單，假設(shè)現(xiàn)在CSS中沒(méi)有浮動(dòng)(float)屬性，那么會(huì)變成一個(gè)什么樣子。我們會(huì)發(fā)現(xiàn)，目前流行采用浮動(dòng)方法實(shí)現(xiàn)的無(wú)論是分欄布局，還是列表排列我們都可以用其他一些CSS屬性（不考慮table）代替實(shí)現(xiàn)，唯一一個(gè)實(shí)現(xiàn)不了的就是“文字環(huán)繞圖片”，我是想不出來(lái)能有什么方法可以讓文字環(huán)繞圖片顯示。好，這個(gè)替代不了的作用才是float真正的意義所在。此作用類似于word中的版式，很基礎(chǔ)的原始的作用：
例如左邊這張word截圖就含有左浮動(dòng)屬性(float:left)，這才是浮動(dòng)應(yīng)該做的事情。這是非常重要的結(jié)論，這是深入理解浮動(dòng)屬性的基礎(chǔ)，我們后面探討的一些浮動(dòng)相關(guān)的問(wèn)題都可以由這里引申出來(lái)，所以，請(qǐng)記住，浮動(dòng)出現(xiàn)的意義其實(shí)只是用來(lái)讓文字環(huán)繞圖片而已，僅此而已。而我們目前用浮動(dòng)實(shí)現(xiàn)頁(yè)面布局本不是浮動(dòng)該干的事情。
四、浮動(dòng)的本質(zhì)是什么？
我將浮動(dòng)的本質(zhì)定義為“包裹與破壞”！
1. 浮動(dòng)的“包裹性”
先說(shuō)句您應(yīng)該沒(méi)有見(jiàn)過(guò)的結(jié)論：撇開(kāi)浮動(dòng)的“破壞性”，浮動(dòng)就是個(gè)帶有方位的display:inline-block屬性。
display:inline-block某種意義上的作用就是包裹(wrap)，而浮動(dòng)也有類似的效果。舉個(gè)常見(jiàn)例子，或許您有實(shí)現(xiàn)寬度自適應(yīng)按鈕的經(jīng)驗(yàn)，實(shí)現(xiàn)寬度自適應(yīng)的關(guān)鍵就是要讓按鈕的大小自適應(yīng)于文字的個(gè)數(shù)，這就需要按鈕要自動(dòng)包裹在文字的外面。我們用什么方法實(shí)現(xiàn)呢？一就是display:inline-block；二就是float。例如我們要實(shí)現(xiàn)新浪博客中的“發(fā)表文章”之類的寬度自適應(yīng)按鈕（如下圖）:
背景圖片為：
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>
結(jié)果如下圖：
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>
結(jié)果如下圖：
您可以狠狠地點(diǎn)擊這里：
按鈕寬度自適應(yīng)demo上面這個(gè)例子旨在說(shuō)明浮動(dòng)屬性（無(wú)論是左浮動(dòng)還是右浮動(dòng)）某種意義上而言與display:inline-block屬性的作用是一模一樣的，所以類似于display:block; float:left;的CSS代碼超過(guò)95%的情況是沒(méi)有道理的(display:block是多余的)。然而，float無(wú)法等同于display:inline-block，其中原因之一就是浮動(dòng)的方向性，display:inline-block僅僅一個(gè)水平排列方向，就是從左往右，而float可以從右往左排列，這就是兩者的差異。然而，我們又有多少情況需要元素從右往左排列呢？很少，所以，CSS中，沒(méi)有浮動(dòng)這一屬性不是什么大不了的事情，它其實(shí)就那么回事。
2. 浮動(dòng)的“破壞性”
浮動(dòng)可以說(shuō)是所有CSS屬性中的“破壞之王”。要理解浮動(dòng)的破壞性，我們要從浮動(dòng)最原始的意義入手。我在上面把浮動(dòng)的原始意義用粗斜體表示出來(lái)了，就是“只是用來(lái)讓文字環(huán)繞圖片而已，僅此而已?！?div style="height:15px;">
所以，只要您弄明白了為什么文字會(huì)環(huán)繞含浮動(dòng)屬性的圖片，您就會(huì)知道我所說(shuō)的浮動(dòng)的“破壞性”是什么意思了。//下面這部分內(nèi)容是本文核心，多個(gè)人觀點(diǎn)，我盡量表述清楚。您若有興趣，可以放慢在這里的閱讀速度。
先說(shuō)結(jié)論：文字之所以會(huì)環(huán)繞含有float屬性的圖片時(shí)因?yàn)楦?dòng)破壞了正常的line boxes。
這里有必要先講講line boxes模型。先看下面一段普通的HTML代碼：
<p>這是一行普通的文字，這里有個(gè) <em>em</em> 標(biāo)簽。</p>
這段HTML代碼涉及到4種boxes：
1、首先是p標(biāo)簽所在的containing box，此box包含了其他的boxes；
2、然后就是inline boxes，如下圖標(biāo)注，
inline boxes不會(huì)讓內(nèi)容成塊顯示，而是排成一行，如果外部含inline屬性的標(biāo)簽(span,a,cite等)，則屬于inline boxes，如果是個(gè)光禿禿的文字，則屬于匿名inline boxes。
3、line boxes，見(jiàn)下圖的標(biāo)注：
在containing boxes里，一個(gè)一個(gè)的inline boxes組成了line boxes。這是浮動(dòng)影響布局的關(guān)鍵box類型，下面會(huì)詳細(xì)闡述。
4、content area，見(jiàn)下圖標(biāo)注：
content area 是一種圍繞文字看不見(jiàn)的box。content area的大小與font-size大小相關(guān)。
正常的圖文混排
默認(rèn)情況下，圖片與文字混排應(yīng)該是這個(gè)樣子：圖片與文字基線對(duì)齊，圖片與文字在同一行上，如下圖所示：
上圖中，圖片為一個(gè)inline boxes，兩邊的文字也是inline boxes。由于line boxes的高度是由其內(nèi)部最高的inline boxes的高度決定的，所以這里line boxes的高度就是圖片的高度。此時(shí)圖片與文字是同一box類型的元素（都是inline boxes），是在同一行上的，所以，默認(rèn)狀態(tài)下，一張圖片只能與一行文字對(duì)齊。而要想讓一張圖片要與多行文字對(duì)齊，您唯一能做的就是破壞正常的line boxes模型。
含有浮動(dòng)屬性的圖片與文字
先看一下圖片添加了float:left樣式后的表現(xiàn)，見(jiàn)下圖：
剛才說(shuō)過(guò)，正常情況下，圖片自身就是個(gè)inline boxes，與兩側(cè)的文字inline boxes共同組成了line boxes，但是，一旦圖片加入了浮動(dòng)，情況就完全變了。我認(rèn)為是浮動(dòng)徹底破壞了img圖片的inline boxes特性，至少有一點(diǎn)我可以肯定，圖片的inline boxes不存在了，被惡魔附體，變身了，而這個(gè)惡魔就是浮動(dòng)。一旦圖片失去了inline boxes特性就無(wú)法與inline boxes的文字排在一行了，其會(huì)從line boxes上脫離出來(lái)，跟隨自身的方位屬性，靠邊排列。這種狀態(tài)跟限制性內(nèi)切酶起作用幾乎一致，一條基因鏈上(line boxes)有很多的基因(inline boxes)，然后限制性內(nèi)切酶(float)會(huì)切除特定的DNA序列，此序列(float元素)就會(huì)從基因鏈上脫離出來(lái)。
這個(gè)從line boxes上脫離的浮動(dòng)元素其實(shí)就是一個(gè)軀體，一個(gè)空殼子，表象。因?yàn)槠錄](méi)有inline boxes。有人可能會(huì)問(wèn)，沒(méi)有inline boxes就沒(méi)有唄，有什么大不了的？非也非也！這個(gè)inline boxes很個(gè)很重要的概念。我曾在“
css行高line-height的一些深入理解及應(yīng)用”一文中提到過(guò)高度的本質(zhì)，這里有必要再講一遍。
在目前的CSS的世界中，所有的高度都是有兩個(gè)CSS模型產(chǎn)生的，一個(gè)是box盒狀模型，對(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文字拉開(kāi)或重疊就是這個(gè)原因），而真正的高度表現(xiàn)則是由每行眾多的inline boxes組成的line boxes（等于內(nèi)部最高的inline box的高度），而這些line boxes的高度垂直堆疊形成了containing box的高度，也就是我們見(jiàn)到的div或是p標(biāo)簽之類的高度了。所以，對(duì)于line box模型的元素而言，沒(méi)有inline boxes，就沒(méi)有高度了，而浮動(dòng)卻恰恰做了這么齷齪的事情，其直接將元素的inline boxes也破壞了，于是這些元素也就沒(méi)有了高度。
我們所處的這個(gè)世界時(shí)需要壞人來(lái)維持平衡的。武俠世界里不是常有要消滅某個(gè)超牛叉的大魔頭時(shí)，會(huì)有人修煉魔功與之抗衡嘛。浮動(dòng)似乎就是這樣的一個(gè)角色，在網(wǎng)頁(yè)最初的時(shí)候就是顯示一些圖片的文字啊什么的，所需要的布局也就那么幾個(gè)，其中之一就是文字環(huán)繞圖片顯示了，可是怎么實(shí)現(xiàn)這樣的效果呢？聰明的CSS開(kāi)發(fā)者就創(chuàng)造了一個(gè)修煉“魔功”的float屬性，其作用就是破壞line boxes模型好讓文字環(huán)繞圖片顯示，最后實(shí)現(xiàn)了嗎？確實(shí)實(shí)現(xiàn)了。還記得我多次說(shuō)到的浮動(dòng)的意義嗎——只是用來(lái)讓文字環(huán)繞圖片而已，而要實(shí)現(xiàn)這個(gè)就需要用到浮動(dòng)的“破壞性”。
沿用上面圖片的例子。浮動(dòng)破壞了圖片的inline box，產(chǎn)生了兩個(gè)結(jié)果：一是圖片無(wú)法與文字同行顯示，脫離了其原來(lái)所在的line box鏈；二是沒(méi)有了高度（無(wú)inline box -> 無(wú)line box -> 無(wú)高度）。而這些結(jié)果恰恰是文字環(huán)繞圖片顯示所必須的。
文字環(huán)繞圖片顯示的原因
先看下面的flash動(dòng)畫(huà)演示（點(diǎn)擊按鈕開(kāi)始）：
動(dòng)畫(huà)所演示的關(guān)鍵點(diǎn)其實(shí)就是上面的一系列分析與講解，即“包裹與破壞”！包裹是讓標(biāo)簽占據(jù)的空間水平收縮，破壞是破壞的inline box。正如上面講解的，inline boxes是高度形成的基礎(chǔ)，浮動(dòng)破壞了inline boxes也就沒(méi)有高度可言了。真是由于浮動(dòng)元素沒(méi)有了inline boxes，沒(méi)有了inline boxes高度，才能讓其他inline boxes元素重新整合，環(huán)繞浮動(dòng)元素排列。
我們現(xiàn)在假設(shè)浮動(dòng)沒(méi)有破壞inline boxes，那么雖然圖片會(huì)靠左顯示，但是其會(huì)與文字形成新的高度包絡(luò)線（同類聚合），且只能與一行文字形成line box，無(wú)法實(shí)現(xiàn)文字環(huán)繞效果，所以浮動(dòng)破壞inline boxes是必須的。
我們可以拿浮動(dòng)元素與絕對(duì)定位元素做對(duì)比或許可以幫助理解。與浮動(dòng)元素一樣，絕對(duì)定位元素也具有“包裹性”，此“包裹性”適用于任何元素。那么，浮動(dòng)元素與絕對(duì)定位元素的差別在哪里呢？我覺(jué)得最主要的差別在于：絕對(duì)定位的元素脫離了文檔流，而浮動(dòng)元素依舊在文檔流中；而這造成的顯示上的差異就是：同處于文檔流中的文字實(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)。見(jiàn)下圖（firebug顯示截圖）：
簡(jiǎn)短的小結(jié)
雖然嘮嘮叨叨說(shuō)了這么多，但是我個(gè)人覺(jué)得還是沒(méi)有講清楚，因?yàn)檫@里面涉及的東西都是看不見(jiàn)的，很多概念性的抽象的東西，即使我做了動(dòng)畫(huà)，也配了圖，但是還是覺(jué)得沒(méi)有講得很明白。尤其我所說(shuō)的浮動(dòng)元素沒(méi)有高度，“你看，那圖片實(shí)實(shí)在在就在那兒，怎么沒(méi)有高度？沒(méi)有高度為什么文字會(huì)繞行？”所以我免不了在實(shí)際高度與inline boxes的關(guān)系這類概念間折騰，越折騰顯得越亂。不過(guò)沒(méi)有關(guān)系，下面我會(huì)根據(jù)上面的講解分析浮動(dòng)元素各種各樣的表現(xiàn)，相信會(huì)對(duì)浮動(dòng)的深入理解有更多的幫助。本文僅完成了三分之一，內(nèi)容較多，我要分篇發(fā)布。
(未完待續(xù)…)
本文內(nèi)容多個(gè)人心得總結(jié)，如果不同觀點(diǎn)，歡迎反駁，歡迎交流，您可以通過(guò)評(píng)論或提問(wèn)交流。
原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明來(lái)自張?chǎng)涡?鑫空間-鑫生活[http://www.zhangxinxu.com]
