1. 浮動
分欄和列表排列都可以用其他css屬性替換,但文字環繞圖片是沒有辦法的,而這裏就是浮動應該出現的地方.浮動的意義就是讓文字環繞圖片而已.
2. 浮動的本質
包裹與破壞
浮動的包裹性(包裹是讓標籤佔據的空間水平收縮)
包裹可以用inline-block來實現,一種按鈕的實現方式,外層居左,裏層居右,背景圖片可以很長,這樣只顯示一部分.如下
.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;}
<a href="javascript:void(0);" class="btn1"><cite>inline-block方法</cite></a>
可以用float:left實現,只不過是把外層的btn1,換成float:left;即可.
所以類似於display:block,float:left,的代碼95%都是沒有道理的
唯一可用的可能就是右浮動,這樣inline-block是沒有
浮動的破壞性(破壞是破壞的inline box)
文字只所以會包含有float屬性的圖片,是因爲float破壞了正常的lline boxes
<p>這是一行普通的文字，這裏有個 <em>em</em> 標籤。</p>
p標籤所在的container box包含了其他boxes,一個個inlinebox組成了linebox
包含了匿名inline-box和inline-box,span,a,cite等都是顯式inline-box
content area是圍繞文字看不到的box,其大小跟font-size相關
剛纔說過，正常情況下，圖片自身就是個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模型，對應樣式爲”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也破壞了，於是這些元素也就沒有了高度。
撇開浮動的‘破壞性’，浮動就是個帶有方位的display:inline-block屬性,跟absolute的區別就是是否覆蓋的問題
3. 浮動的非本職工作
讓匿名inlinebox的文字環繞圖片顯示
4. 浮動是魔鬼
理論上而言，除了浮動的環繞效果之外，我們使用浮動做的其他工作都可以使用別的CSS屬性實現，而且大部分情況是比浮動的效果好：首先沒有了清楚浮動一說，二是有關浮動的一堆bug也不會出現，三是元素間獨立了，不會像浮動一樣改變一個會影響其他。但是，考慮到大多數人對CSS掌握的程度，以及瀏覽器的一些兼容性問題等，很多時候，我們不得不使用看上去使用方面但潛在問題較大的浮動屬性。所以，有關浮動的一些特性的研究還是很有必要的，這就是下面的重點。
5. 清除浮動的方法
IE下清除浮動準則很簡單，使元素haslayout就可以了。如寬度值，高度值，絕對定位，zoom，浮動本身都可以讓元素haslayout。顯然，首選zoom:1;不會干擾任何樣式。非IE瀏覽器常用的是overflow屬性，overflow:hidden;或是overflow:scroll都可以，不過由於後者經常一不小心出現滾動條，所以前者用的更多些。由於現代瀏覽器都支持after僞類僞元素，所以常常也會用after寫入一個clear屬性的元素清除浮動。當然，最投機取巧的方法就是直接一個<div
style="clear:both;"></div>放到當作最後一個子標籤放到父標籤那兒。下面小結這幾個方法。
div clear:both 這種方法容易產生空白高度
flow:hidden, zoom:1,margin 負值或者負的絕對定位時容易有問題
after+zoom的方法最是通用,比較推薦
6. float 與javascript
obj.style.styleFloat = "left";
其他瀏覽器：
obj.style.cssFloat = "left";