網頁中自私自利且影響他人的Float

引言：

       相信你們在用Html+Css編寫網頁時會常常用到css中float（浮動）這個屬性吧，浮動能讓咱們很好進行頁面的佈局，但種種問題也隨之而來。

一.float的基本屬性及應用

         這個屬性叫漂浮，顧名思義，就是讓設置的標籤產生浮動效果，就是脫離原來頁面的標準輸出流。
正常狀況下，HTML頁面中塊元素都是從上倒下排列的。若是想實現左右結構。
float是一種選擇（固然還有其餘方法）。
好比
<div style="widht:500px">
<div style="float:left;">左</div>
<div style="float:left;">右</div>
</div>

當標籤使用了float屬性後，就脫離了標準輸出流，就不受頁面約束了。這樣不方便，也不利於頁面佈局。
因此，通常浮動以後要清除浮動。
<div style="widht:500px">
<div style="float:left;">左</div>
<div style="float:right;">右</div>
<span style="clear:both"></span>
</div>

二.浮動的破壞性

       咱們會發現，目前流行採用浮動方法實現的不管是分欄佈局，仍是列表排列咱們均可以用其餘一些CSS屬性（不考慮table）代替實現，惟一一個實現不了的就是「文字環繞圖片」，我是想不出來能有什麼方法可讓文字環繞圖片顯示。好，這個替代不了的做用纔是float真正的意義所在。此做用相似於word中的版式，很基礎的原始的做用，正常狀況下，圖片自身就是個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模型好讓文字環繞圖片顯示。