css float浮動(dòng)屬性的深入研究及詳解拓展

cssfloat浮動(dòng)屬性的深入研究及詳解拓展來(lái)源：互聯(lián)網(wǎng)作者：佚名我并沒有對(duì)CSS所有的屬性都有很清晰的情感化的理解，我用CSS才幾年啊，我要學(xué)的還有很多。但是，對(duì)于CSS中常用的float屬性，我還是有些感覺的，這也是本文的主旨所在。本文將會(huì)從我的一些感性的認(rèn)識(shí)的角度講解CSSfloat屬性概念目錄個(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í)際的生活中，也反映在代碼上。你我看待代碼的方式，或者說是代碼在我們情感層面的位置是不一樣的，我這里說的是情感層面，與邏輯無(wú)關(guān)，與算法無(wú)關(guān)（雖然算法受情感影響）。這種看待代碼的方式是我們?cè)诓粩鄬W(xué)習(xí)與工作的過程中積累出來(lái)的，是在潛意識(shí)層面逐漸積累起來(lái)的，一切悄然而至，不知不覺。當(dāng)我們積累到一定階段后，會(huì)突然發(fā)現(xiàn)，關(guān)于代碼，我們已經(jīng)形成了自己的世界觀和屬于自己的準(zhǔn)則?；氐轿覄偺岬降摹扒楦袑用妗保@個(gè)詞也可以用“感性思維”來(lái)代替。通常而言，程序-代碼屬于很理性很邏輯的東西，與感性-情感這類詞搭不上邊，但是CSS例外。CSS也屬于代碼范疇，而且是一種偉大的代碼，其有別于C，JAVA之類程序語(yǔ)言——沒有算法，沒有復(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è)人的色彩，這種情感化的東西可以說讓我更好的理解CSS，我想這不難理解，舉個(gè)例子：假設(shè)你將每個(gè)CSS屬性看做是你的孩子，每個(gè)孩子有著不同的性格，隨著學(xué)習(xí)你會(huì)挖掘到更多的一些性格，這就好比母親看著自己的孩子一點(diǎn)點(diǎn)長(zhǎng)大，到了一定的程度就會(huì)把自己的孩子的性格摸得一清二楚，管教也就從容了。當(dāng)然，我并沒有對(duì)CSS所有的屬性都有很清晰的情感化的理解，我用CSS才幾年啊，我要學(xué)的還有很多。但是，對(duì)于CSS中常用的float屬性，我還是有些感覺的，這也是本文的主旨所在。本文將會(huì)從我的一些感性的認(rèn)識(shí)的角度講解CSSfloat屬性。所以，這里，你會(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è)問題的答案很簡(jiǎn)單，假設(shè)現(xiàn)在CSS中沒有浮動(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)的問題都可以由這里引申出來(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)的“包裹性”

先說句您應(yīng)該沒有見過的結(jié)論：撇開浮動(dòng)的“破壞性”，浮動(dòng)就是個(gè)帶有方位的display:inline-block屬性。display:inline-block某種意義上的作用就是包裹(wrap)，而浮動(dòng)也有類似的效果。舉個(gè)常見例子，或許您有實(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(/file_images/article/201301/2013010709283024.png)no-repeatlefttop;padding-left:3px;color:#000000;font-size:12px;text-decoration:none;}

.btn1cite{display:block;line-height:26px;padding:013px010px;background:url(/file_images/article/201301/2013010709283024.png)no-repeatrighttop;}HTML代碼如下：<ahref="javascript:void(0);"class="btn1"><cite>inline-block方法</cite></a>結(jié)果如下圖：float:left方法

此方法的CSS代碼與上面的inline-block方法唯一不同之處就在于這里是float:left;CSS代碼如下：.btn1{float:left;background:url(/file_images/article/201301/2013010709283024.png)no-repeatlefttop;padding-left:3px;color:#000000;font-size:12px;text-decoration:none;}

.btn1cite{display:block;line-height:26px;padding:013px010px;background:url(/file_images/article/201301/2013010709283024.png)no-repeatrighttop;}HTML代碼如下：<ahref="javascript:void(0);"class="btn1"><cite>float方法</cite></a>結(jié)果如下圖：上面這個(gè)例子旨在說明浮動(dòng)屬性（無(wú)論是左浮動(dòng)還是右浮動(dòng)）某種意義上而言與display:inline-block屬性的作用是一模一樣的，所以類似于display:block;float:left;的CSS代碼超過95%的情況是沒有道理的(display:block是多余的)。然而，float無(wú)法等同于display:inline-block，其中原因之一就是浮動(dòng)的方向性，display:inline-block僅僅一個(gè)水平排列方向，就是從左往右，而float可以從右往左排列，這就是兩者的差異。然而，我們又有多少情況需要元素從右往左排列呢？很少，所以，CSS中，沒有浮動(dòng)這一屬性不是什么大不了的事情，它其實(shí)就那么回事。2.浮動(dòng)的“破壞性”

浮動(dòng)可以說是所有CSS屬性中的“破壞之王”。要理解浮動(dòng)的破壞性，我們要從浮動(dòng)最原始的意義入手。我在上面把浮動(dòng)的原始意義用粗斜體表示出來(lái)了，就是“只是用來(lái)讓文字環(huán)繞圖片而已，僅此而已?！彼裕灰靼琢藶槭裁次淖謺?huì)環(huán)繞含浮動(dòng)屬性的圖片，您就會(huì)知道我所說的浮動(dòng)的“破壞性”是什么意思了。//下面這部分內(nèi)容是本文核心，多個(gè)人觀點(diǎn)，我盡量表述清楚。您若有興趣，可以放慢在這里的閱讀速度。先說結(jié)論：文字之所以會(huì)環(huán)繞含有float屬性的圖片時(shí)因?yàn)楦?dòng)破壞了正常的lineboxes。這里有必要先講講lineboxes模型。先看下面一段普通的HTML代碼：<p>這是一行普通的文字，這里有個(gè)<em>em</em>標(biāo)簽。</p>這段HTML代碼涉及到4種boxes：

1、首先是p標(biāo)簽所在的containingbox，此box包含了其他的boxes；2、然后就是inlineboxes，如下圖標(biāo)注，

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

在containingboxes里，一個(gè)一個(gè)的inlineboxes組成了lineboxes。這是浮動(dòng)影響布局的關(guān)鍵box類型，下面會(huì)詳細(xì)闡述。4、contentarea，見下圖標(biāo)注：

contentarea是一種圍繞文字看不見的box。contentarea的大小與font-size大小相關(guān)。正常的圖文混排

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

上圖中，圖片為一個(gè)inlineboxes，兩邊的文字也是inlineboxes。由于lineboxes的高度是由其內(nèi)部最高的inlineboxes的高度決定的，所以這里lineboxes的高度就是圖片的高度。此時(shí)圖片與文字是同一box類型的元素（都是inlineboxes），是在同一行上的，所以，默認(rèn)狀態(tài)下，一張圖片只能與一行文字對(duì)齊。而要想讓一張圖片要與多行文字對(duì)齊，您唯一能做的就是破壞正常的lineboxes模型。含有浮動(dòng)屬性的圖片與文字

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

剛才說過，正常情況下，圖片自身就是個(gè)inlineboxes，與兩側(cè)的文字inlineboxes共同組成了lineboxes，但是，一旦圖片加入了浮動(dòng)，情況就完全變了。我認(rèn)為是浮動(dòng)徹底破壞了img圖片的inlineboxes特性，至少有一點(diǎn)我可以肯定，圖片的inlineboxes不存在了，被惡魔附體，變身了，而這個(gè)惡魔就是浮動(dòng)。一旦圖片失去了inlineboxes特性就無(wú)法與inlineboxes的文字排在一行了，其會(huì)從lineboxes上脫離出來(lái)，跟隨自身的方位屬性，靠邊排列。這種狀態(tài)跟限制性內(nèi)切酶起作用幾乎一致，一條基因鏈上(lineboxes)有很多的基因(inlineboxes)，然后限制性內(nèi)切酶(float)會(huì)切除特定的DNA序列，此序列(float元素)就會(huì)從基因鏈上脫離出來(lái)。這個(gè)從lineboxes上脫離的浮動(dòng)元素其實(shí)就是一個(gè)軀體，一個(gè)空殼子，表象。因?yàn)槠錄]有inlineboxes。有人可能會(huì)問，沒有inlineboxes就沒有唄，有什么大不了的？非也非也！這個(gè)inlineboxes很個(gè)很重要的概念。我曾在“css行高line-height的一些深入理解及應(yīng)用”一文中提到過高度的本質(zhì)，這里有必要再講一遍。在目前的CSS的世界中，所有的高度都是有兩個(gè)CSS模型產(chǎn)生的，一個(gè)是box盒狀模型，對(duì)應(yīng)CSS為”height+padding+margin”，另外一個(gè)是linebox模型，對(duì)應(yīng)樣式為”line-height”。前者的height屬性分為明顯的height值和隱藏的height值，所謂隱藏的height值是指圖片的高度，一旦載入一張圖片，其內(nèi)在的height值就會(huì)起作用，即使您看不到”height”這個(gè)詞。而后者針對(duì)于文字等這類inlineboxes的元素（圖片也屬于inlineboxes，但其height比line-height作用更兇猛，故其inlineboxes高度等于其自身高度，對(duì)line-height無(wú)反應(yīng)），inlineboxes的高度直接受line-height控制（改變line-height文字拉開或重疊就是這個(gè)原因），而真正的高度表現(xiàn)則是由每行眾多的inlineboxes組成的lineboxes（等于內(nèi)部最高的inlinebox的高度），而這些lineboxes的高度垂直堆疊形成了containingbox的高度，也就是我們見到的div或是p標(biāo)簽之類的高度了。所以，對(duì)于linebox模型的元素而言，沒有inlineboxes，就沒有高度了，而浮動(dòng)卻恰恰做了這么齷齪的事情，其直接將元素的inlineboxes也破壞了，于是這些元素也就沒有了高度。我們所處的這個(gè)世界時(shí)需要壞人來(lái)維持平衡的。武俠世界里不是常有要消滅某個(gè)超牛叉的大魔頭時(shí)，會(huì)有人修煉魔功與之抗衡嘛。浮動(dòng)似乎就是這樣的一個(gè)角色，在網(wǎng)頁(yè)最初的時(shí)候就是顯示一些圖片的文字啊什么的，所需要的布局也就那么幾個(gè)，其中之一就是文字環(huán)繞圖片顯示了，可是怎么實(shí)現(xiàn)這樣的效果呢？聰明的CSS開發(fā)者就創(chuàng)造了一個(gè)修煉“魔功”的float屬性，其作用就是破壞lineboxes模型好讓文字環(huán)繞圖片顯示，最后實(shí)現(xiàn)了嗎？確實(shí)實(shí)現(xiàn)了。還記得我多次說到的浮動(dòng)的意義嗎——只是用來(lái)讓文字環(huán)繞圖片而已，而要實(shí)現(xiàn)這個(gè)就需要用到浮動(dòng)的“破壞性”。沿用上面圖片的例子。浮動(dòng)破壞了圖片的inlinebox，產(chǎn)生了兩個(gè)結(jié)果：一是圖片無(wú)法與文字同行顯示，脫離了其原來(lái)所在的linebox鏈；二是沒有了高度（無(wú)inlinebox->無(wú)linebox->無(wú)高度）。而這些結(jié)果恰恰是文字環(huán)繞圖片顯示所必須的。文字環(huán)繞圖片顯示的原因

先看下面的flash動(dòng)畫演示（點(diǎn)擊按鈕開始）：

如果沒有顯示flash動(dòng)畫，可能您看到的不是原出處，請(qǐng)?jiān)L問張?chǎng)涡?鑫空間-鑫生活動(dòng)畫所演示的關(guān)鍵點(diǎn)其實(shí)就是上面的一系列分析與講解，即“包裹與破壞”！包裹是讓標(biāo)簽占據(jù)的空間水平收縮，破壞是破壞的inlinebox。正如上面講解的，inlineboxes是高度形成的基礎(chǔ)，浮動(dòng)破壞了inlineboxes也就沒有高度可言了。真是由于浮動(dòng)元素沒有了inlineboxes，沒有了inlineboxes高度，才能讓其他inlineboxes元素重新整合，環(huán)繞浮動(dòng)元素排列。我們現(xiàn)在假設(shè)浮動(dòng)沒有破壞inlineboxes，那么雖然圖片會(huì)靠左顯示，但是其會(huì)與文字形成新的高度包絡(luò)線（同類聚合），且只能與一行文字形成linebox，無(wú)法實(shí)現(xiàn)文字環(huán)繞效果，所以浮動(dòng)破壞inlineboxes是必須的。我們可以拿浮動(dòng)元素與絕對(duì)定位元素做對(duì)比或許可以幫助理解。與浮動(dòng)元素一樣，絕對(duì)定位元素也具有“包裹性”，此“包裹性”適用于任何元素。那么，浮動(dòng)元素與絕對(duì)定位元素的差別在哪里呢？我覺得最主要的差別在于：絕對(duì)定位的元素脫離了文檔流，而浮動(dòng)元素依舊在文檔流中；而這造成的顯示上的差異就是：同處于文檔流中的文字實(shí)體不會(huì)與浮動(dòng)元素重疊，而會(huì)與絕對(duì)定位元素重疊。這就是文字環(huán)繞顯示的重要原因之一：雖然圖片實(shí)際占據(jù)的高度為0，但是由于其寬度實(shí)體存在（包裹性），同樣是contentarea實(shí)體的文字不會(huì)與之重疊（外部的容器盒子containingbox(p,div,ul,li)會(huì)重疊），這就好比籃球場(chǎng)上站了個(gè)植物人，雖然其幾乎不可能得分，運(yùn)球之類，但是他的實(shí)體在那里，它可以阻擋同一水平空間上的同一類型的個(gè)體（即人）直接穿過去，要通過，得繞道。但是其無(wú)法阻擋整個(gè)球隊(duì)的向前推進(jìn)。見下圖（firebug顯示截圖）：

簡(jiǎn)短的小結(jié)

雖然嘮嘮叨叨說了這么多，但是我個(gè)人覺得還是沒有講清楚，因?yàn)檫@里面涉及的東西都是看不見的，很多概念性的抽象的東西，即使我做了動(dòng)畫，也配了圖，但是還是覺得沒有講得很明白。尤其我所說的浮動(dòng)元素沒有高度，“你看，那圖片實(shí)實(shí)在在就在那兒，怎么沒有高度？沒有高度為什么文字會(huì)繞行？”所以我免不了在實(shí)際高度與inlineboxes的關(guān)系這類概念間折騰，越折騰顯得越亂。不過沒有關(guān)系，下面我會(huì)根據(jù)上面的講解分析浮動(dòng)元素各種各樣的表現(xiàn)，相信會(huì)對(duì)浮動(dòng)的深入理解有更多的幫助。本文僅完成了三分之一，內(nèi)容較多，我要分篇發(fā)布。五、浮動(dòng)的非本職工作浮動(dòng)的本職工作是讓匿名inlineboxes性質(zhì)的文字環(huán)繞圖片顯示，而其他所有用浮動(dòng)實(shí)現(xiàn)的效果都不是浮動(dòng)應(yīng)該做的事情，我稱之為“非本職工作”?；蛟S我們并沒有過多的深思，把一些實(shí)際上不是浮動(dòng)該干的事情當(dāng)作“這必須用浮動(dòng)來(lái)實(shí)現(xiàn)”。舉個(gè)常見的例子，列表顯示，見下面的圖，截自淘寶新版首頁(yè)：

我不看代碼就知道是用浮動(dòng)實(shí)現(xiàn)的，我用firebug一看，果然是，不僅浮動(dòng)，而且定寬。ps:要是在幾個(gè)月以前，我會(huì)覺得這實(shí)在有待改進(jìn)，不過現(xiàn)在我的心態(tài)寬了，布局思想不同而已，沒有孰對(duì)孰錯(cuò)之分。

我可以確信，浮動(dòng)這個(gè)屬性誕生的那天壓根沒有想到自己會(huì)要做這樣的事情，本來(lái)它以為自己就讓文字環(huán)繞顯示就OK了，功德圓滿了，結(jié)果，在web2.0的時(shí)代，其卻在頁(yè)面布局中被濫用。可能有人會(huì)反駁，你何處此言，有何證據(jù)？我們只要靜下心來(lái)好好想想浮動(dòng)的本質(zhì)，實(shí)現(xiàn)的原理，就可以知道為什么浮動(dòng)本不應(yīng)該用來(lái)對(duì)頁(yè)面進(jìn)行布局。還記得上一部分所說的浮動(dòng)的本質(zhì)嗎？即“包裹與破壞”。我們可以用這個(gè)（“包裹與破壞”）解釋為什么浮動(dòng)可以讓li這類block水平的元素水平排列。單個(gè)無(wú)浮動(dòng)的li元素看下面的HTML代碼：<ulstyle="width:440px;">

<listyle="border:4pxsolid#ff6633;background:#ffffc0;"><imgsrc="../image/border.png"/></li>

</ul>結(jié)果如下圖（截自Firefox瀏覽器，無(wú)其他樣式干擾，下同）：

這里的li元素為什么會(huì)有高度？如果您認(rèn)真讀過前半部分內(nèi)容關(guān)于lineboxes模型與高度的關(guān)系的內(nèi)容，應(yīng)該知道，由于圖片沒有應(yīng)用float屬性，其本身有一個(gè)正常的inlinebox，這個(gè)inlinebox高度等于圖片的height，在這行元素中，圖片這個(gè)inlinebox的高度最高，于是傳遞給了linebox，linebox是個(gè)真正意義上的高度，直接作用于containingbox（就是這里的li元素，使li元素有一個(gè)高度）。理解了這個(gè)您就會(huì)明白為什么要是這里的圖片添加了float屬性，li高度會(huì)塌陷了：浮動(dòng)破壞了inlinebox。這個(gè)后面會(huì)詳細(xì)講解。這里的li沒有添加float屬性，可以見到li寬度100%自適應(yīng)于父ul標(biāo)簽。一切顯得那么的和諧！單個(gè)左浮動(dòng)的li元素看下面的HTML代碼：<ulstyle="width:440px;">

<listyle="border:4pxsolid#ff6633;background:#ffffc0;float:left;"><imgsrc="../image/border.png"/></li>

</ul>結(jié)果如下圖：

相比上面而言，這里多了個(gè)float:left;，浮動(dòng)的“包裹性”一目了然：水平方向上，li寬度緊貼內(nèi)部元素。我在cssfloat浮動(dòng)屬性的深入研究及詳解拓展(一)曾說過這么句結(jié)論性的話：“撇開浮動(dòng)的‘破壞性’，浮動(dòng)就是個(gè)帶有方位的display:inline-block屬性”。這不難理解，您可以講這里的float:left;改成display:inline-block;最后實(shí)現(xiàn)的效果基本上就是一樣的。display:inline-block將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象，但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。所謂對(duì)象呈遞為內(nèi)斂對(duì)象就是元素呈遞為inlinebox，所以浮動(dòng)“包裹性”所產(chǎn)生的結(jié)果就是使得元素轉(zhuǎn)為了linebox模型中的inlinebox元素。浮動(dòng)的“包裹性”讓元素變成類似于inlinebox的元素，而浮動(dòng)的“破壞性”正是破壞inlinebox元素的，這其中豈不有矛盾。其實(shí)非也，對(duì)于block水平的這類塊狀元素需要先讓其變成類似效果的內(nèi)聯(lián)元素，然后再破壞之，實(shí)乃先誘拐再奸殺的生動(dòng)實(shí)例?。∮质俏曳磸?fù)提到的，浮動(dòng)破壞了inlinebox，也就是破壞了高度，所以這里含有浮動(dòng)屬性的li元素實(shí)際上是沒有高度的。所以呢，要是后面還有同樣的li標(biāo)簽的話，就會(huì)水平對(duì)齊排列的。如下：

多個(gè)左浮動(dòng)的li元素看下面的HTML代碼：<ulstyle="width:440px;">

<listyle="border:4pxsolid#ff6633;background:#ffffc0;float:left;"><imgsrc="../image/border.png"/></li>

<listyle="border:4pxsolid#ff6633;background:#ffffc0;float:left;"><imgsrc="../image/border.png"/></li>

</ul>結(jié)果如下圖：

左浮動(dòng)的li元素和無(wú)浮動(dòng)的li元素看下面的HTML代碼：<ulstyle="width:440px;">

<listyle="border:4pxsolid#ff6633;background:#ffffc0;float:left;"><imgsrc="../image/border.png"/></li>

<listyle="border:4pxsolid#ff6633;background:#ffffc0;"><imgsrc="../image/border.png"/></li>

</ul>結(jié)果如下圖：

后面一個(gè)li無(wú)float屬性，直接無(wú)視前面的floatli元素，寬度100%顯示，而且與float屬性的li同一水平線排列，為何？因?yàn)楦?dòng)破壞了li的實(shí)際高度（原因我講得太多次了），只是圖片是個(gè)實(shí)體，無(wú)法與同樣實(shí)體的同一文檔流的圖片重合，所以圖片靠在一起。六、證據(jù)1.首要證據(jù)

cssfloat浮動(dòng)屬性的深入研究及詳解拓展(一)是著重分析了浮動(dòng)的“本職工作”：文字環(huán)繞顯示；本文著重分析了浮動(dòng)的“非本職工作”：列表布局；兩者都是用的同樣的原理解釋的，那么有什么證據(jù)可以證明“頁(yè)面布局”不是浮動(dòng)的“本職工作”呢。答案關(guān)鍵字就是：高度塌陷。我在多個(gè)地方濃墨重彩的講浮動(dòng)與高度的關(guān)系，浮動(dòng)使高度塌陷的原因，自己都覺得嘮叨的太多了，這里不再講。直接講些實(shí)際的東西。您是否發(fā)現(xiàn)，浮動(dòng)布局會(huì)讓父標(biāo)簽高度缺失，但是實(shí)現(xiàn)文字環(huán)繞圖片效果的時(shí)候父標(biāo)簽無(wú)需清除浮動(dòng)。還是上面的例子，我們看看多l(xiāng)i元素浮動(dòng)時(shí)ul標(biāo)簽高度在哪里，我們可以給ul加個(gè)邊框?qū)傩宰鰷y(cè)試，測(cè)試代碼如下：<ulstyle="width:440px;border-top:4pxsolid#a0b3d6;border-bottom:4pxsolid#34538b;">

<listyle="border:4pxsolid#ff6633;background:#ffffc0;float:left;"><imgsrc="../image/border.png"/></li>

<listyle="border:4pxsolid#ff6633;background:#ffffc0;float:left;"><imgsrc="../image/border.png"/></li>

</ul>結(jié)果如下圖：

上圖顯示ul高度為0，這是必然的，正常的，應(yīng)該的。您要是在IE下看到ul有高度，認(rèn)為這是Firefox等瀏覽器有問題就錯(cuò)了，您把ul的width屬性去掉，看看，會(huì)發(fā)現(xiàn)IE下ul高度也為0，這是IE的layout作祟。至于為什么ul高度為0，我前面很多地方都已經(jīng)講了，不再說了。但是，從中我們可以看到，浮動(dòng)本不是用來(lái)列表布局的，而是用來(lái)使元素環(huán)繞顯示的，因?yàn)樵丨h(huán)繞（例如文字），其自身是含有inlineboxes高度的，這是inline水平的元素形成高度的基礎(chǔ)，所以，雖然浮動(dòng)元素沒有高度，但是其周圍環(huán)繞的元素是有高度的，只要環(huán)繞元素比浮動(dòng)元素高度高，父標(biāo)簽無(wú)高度的問題自然也就沒有了，但是純粹一堆浮動(dòng)元素會(huì)有高度嗎？沒有。所以浮動(dòng)元素塌陷的問題根本就不是瀏覽器的bug，而是我們沒有正確地深入地了解浮動(dòng)，是我們自己使用不當(dāng)，因?yàn)楦?dòng)本不應(yīng)該用在這里的。2.其他證據(jù)為什么說浮動(dòng)的本職工作不是頁(yè)面布局而應(yīng)該是是元素環(huán)繞呢。還有其他些證據(jù)。歷史CSS剛誕生的時(shí)候，那時(shí)候的網(wǎng)頁(yè)還是表格布局的時(shí)代，能顯示幾張圖片就不錯(cuò)了，復(fù)雜的列表顯示，布局啊這些概念還是很淡薄的，浮動(dòng)出現(xiàn)的意義就是讓文字能夠環(huán)繞圖片顯示而已，就如word般?，F(xiàn)象Google是目前互聯(lián)網(wǎng)領(lǐng)域的老大，技術(shù)很牛叉，毋庸置疑，但是，當(dāng)我發(fā)現(xiàn)它所有的頁(yè)面幾乎都是表格布局的時(shí)候，很詫異；還有twitter，也是表格布局的；

為什么這些頂尖的web網(wǎng)站使用表格布局，而不跟隨潮流呢，起初我是百思不得其解?，F(xiàn)在，我是明白了，這么做是有他的道理的，難道要用一堆浮動(dòng)的元素去布局嗎？這不是浮動(dòng)該干的事情。而且，浮動(dòng)是個(gè)很不好惹的魔鬼。七、浮動(dòng)是個(gè)魔鬼、混球浮動(dòng)的存在就是個(gè)破壞。浮動(dòng)效果的實(shí)現(xiàn)就是先破壞自身（揮刀自宮），然后影響別人。頁(yè)面中只要出現(xiàn)一個(gè)浮動(dòng)，勢(shì)必有其他元素受其影響。這是開發(fā)和維護(hù)中的一個(gè)定時(shí)炸蛋(敏感詞)。我們想想浮動(dòng)的意義，只是讓文字環(huán)繞圖片顯示而已，所以其必須破壞自身模型和高度。但是，不知道幸運(yùn)還是不幸，浮動(dòng)的這種置之死地而后生的特性居然可以讓元素布局，加上其表面意思很好理解，兼容性還不錯(cuò)，使用方便，于是在舍棄了table布局的這個(gè)web時(shí)代里，浮動(dòng)成為當(dāng)前頁(yè)面布局的主流。想想，真是一件可怕的事情。有些人可能沒有意識(shí)到浮動(dòng)其實(shí)是個(gè)很糟糕的東西，是CSS中的一個(gè)魔鬼。為什么，或許因?yàn)橛酶?dòng)布局頁(yè)面發(fā)現(xiàn)還行，即使偶爾出現(xiàn)些小bug，打打補(bǔ)丁也可以解決。或許是因?yàn)闆]有體會(huì)到非浮動(dòng)元素和浮動(dòng)元素在開發(fā)和維護(hù)上所消耗的成本精力的差別。有些人可能知道浮動(dòng)這個(gè)屬性能不用就不用，但是由于找不到更好的替代方法，所以還是有很多地方使用了浮動(dòng)布局，例如選項(xiàng)卡，列表顯示等。理論上而言，除了浮動(dòng)的環(huán)繞效果之外，我們使用浮動(dòng)做的其他工作都可以使用別的CSS屬性實(shí)現(xiàn)，而且大部分情況是比浮動(dòng)的效果好：首先沒有了清楚浮動(dòng)一說，二是有關(guān)浮動(dòng)的一堆bug也不會(huì)出現(xiàn)，三是元素間獨(dú)立了，不會(huì)像浮動(dòng)一樣改變一個(gè)會(huì)影響其他。但是，考慮到大多數(shù)人對(duì)CSS掌握的程度，以及瀏覽器的一些兼容性問題等，很多時(shí)候，我們不得不使用看上去使用方面但潛在問題較大的浮動(dòng)屬性。所以，有關(guān)浮動(dòng)的一些特性的研究還是很有必要的，這就是下面的重點(diǎn)。八、解決高度塌陷的問題–清除浮動(dòng)CSS中有個(gè)討論較多的話題就是如何清除浮動(dòng)，清除浮動(dòng)其實(shí)就一個(gè)目的，就是解決高度塌陷的問題。為什么會(huì)高度塌陷？什么時(shí)候會(huì)高度塌陷？塌陷原因是：元素含有浮動(dòng)屬性–破壞inlinebox–破壞linebox高度–沒有高度–塌陷。什么時(shí)候會(huì)塌陷：當(dāng)標(biāo)簽里面的元素只要樣子沒有實(shí)際高度時(shí)會(huì)塌陷。所以呢，并不是只要有浮動(dòng)元素就會(huì)坍塌，就要清除的，CSS水平高低衡量的標(biāo)準(zhǔn)之一就是改用什么樣式就用什么樣式，不多用也不少用。下面就來(lái)講講如何清除浮動(dòng)，zxx:寫到這兒，一下子輕松了。

IE下清除浮動(dòng)準(zhǔn)則很簡(jiǎn)單，使元素haslayout就可以了。如寬度值，高度值，絕對(duì)定位，zoom，浮動(dòng)本身都可以讓元素haslayout。顯然，首選zoom:1;不會(huì)干擾任何樣式。非IE瀏覽器常用的是overflow屬性，overflow:hidden;或是overflow:scroll都可以，不過由于后者經(jīng)常一不小心出現(xiàn)滾動(dòng)條，所以前者用的更多些。由于現(xiàn)代瀏覽器都支持after偽類，所以常常也會(huì)用after寫入一個(gè)clear屬性的元素清除浮動(dòng)。當(dāng)然，最投機(jī)取巧的方法就是直接一個(gè)<divstyle="clear:both;"></div>放到當(dāng)作最后一個(gè)子標(biāo)簽放到父標(biāo)簽?zāi)莾?。下面小結(jié)這幾個(gè)方法。1.投機(jī)取巧法就是直接一個(gè)<divstyle="clear:both;"></div>放到當(dāng)作最后一個(gè)子標(biāo)簽放到父標(biāo)簽?zāi)莾?，此方法屢試不爽，兼容性?qiáng)，使用方便，是初學(xué)時(shí)使用的上佳之選。但是我從來(lái)不用，因?yàn)槲铱吹降氖莻€(gè)巨大的浪費(fèi)，浪費(fèi)了一個(gè)標(biāo)簽，而且只