1. 浮動出現的意義其實只是用來讓文字環繞圖片而已，僅此而已。而我們目前用浮動實現頁面布局本不是浮動該干的事情

2. 浮動的包裹性

撇開浮動的“破壞性”，浮動就是個帶有方位的display:inline-block屬性

display:inline-block某種意義上的作用就是包裹(wrap)，而浮動也有類似的效果。舉個常見例子，或許您有實現寬度自適應按鈕的經驗，實現寬度自適應的關鍵就是要讓按鈕的大小自適應于文字的個數，這就需要按鈕要自動包裹在文字的外面。我們用什么方法實現呢？一就是display:inline-block；二就是float

浮動從某種意義上而言與display:inline-block屬性的作用是一模一樣的，所以類似于display:block; float:left;的CSS代碼超過95%的情況是沒有道理的(display:block是多余的)。然而，float無法等同于display:inline-block，其中原因之一就是浮動的方向性，display:inline-block僅僅一個水平排列方向，就是從左往右，而float可以從右往左排列，這就是兩者的差異。然而，我們又有多少情況需要元素從右往左排列呢？很少，所以，CSS中，沒有浮動這一屬性不是什么大不了的事情，它其實就那么回事

3. 浮動的破壞性

文字之所以會環繞含有float屬性的圖片是因為浮動破壞了正常的line boxes

HTML:<p>這是一行普通的文字，這里有個 <em>em</em> 標簽</p>

這段HTML代碼涉及到4種boxes：

1. 首先是p標簽所在的containing box，此box包含了其他的所有boxes

2. 然后就是inline boxes

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

3. line boxes

在containing boxes里，一個一個的inline boxes組成了line boxes。這是浮動影響布局的關鍵box類型

4. content area

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

5. 正常的圖文混排

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

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

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

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

在目前的CSS的世界中，所有的高度都是有兩個CSS模型產生的，一個是box盒狀模型，對應CSS為”height+padding+margin”，另外一個是line box模型，對應CSS為”line-height”。前者的height屬性分為明顯的height值和隱藏的height值，所謂隱藏的height值是指圖片的高度，一旦載入一張圖片，其內在的height值就會起作用，即使您看不到”height”這個詞。而后者line box則針對于文字等這類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 -> 無高度）

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

總結：

1. 浮動元素的破壞性雖然破壞了inline boxes，但其內容還是真實存在的(圖片占據的高度為0，但是因為包裹性的原因其實體還是存在)，所以和絕對定位元素不同的就是被破壞掉的元素并沒有脫離文檔流，仍然會占據一定的空間

2. 浮動元素的包裹性是指浮動元素實際就是一個block元素，或者帶方向的inline-block屬性，那么等同于是根據內容來決定寬度或者高度的意思

3. 浮動元素的破壞性是指破壞了inline boxes導致的

4. CSS中的高度由2個模型產生，一個是盒模型的margin+padding+content，另一個則是專門用來衡量文字的line boxes，文字的高度一般由line-height屬性決定

總結

以上是生活随笔為你收集整理的CSS之浮动（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。