MB5U.com原創(chuàng)，未經(jīng)本站同意，嚴禁轉(zhuǎn)載！

　　在傳統(tǒng)的表格布局中，我們對表格應(yīng)該對齊方式對實現(xiàn)了對布局的應(yīng)用，而應(yīng)用Web標準構(gòu)建網(wǎng)頁以后，float浮動屬性是布局中非常重要的屬性，我們經(jīng)常通過對div元素應(yīng)用float浮動來進行布局，不但對整個版式進行規(guī)劃，也可以對一些基本元素如導(dǎo)航等進行排列。

　　我們來看看float屬性基本釋義：
　　該屬性的值指出了對象是否及如何浮動。當該屬性不等于none引起對象浮動時，對象將被視作塊對象(block-level)，即display屬性等于block。也就是說，浮動對象的display特性將被忽略。

　　float屬性的參數(shù)：
　　none：對象不浮動
　　left：對象浮在左邊
　　right：對象浮在右邊

　　下面我們通過一些測試來了解可能出現(xiàn)的一些情況，假如float取值為none則不會發(fā)生任何浮動，塊元素獨占一行，緊隨其后的塊元素將在新行中顯示，如下圖：


　　我們看下面的運行效果：


　　我們對content_a應(yīng)用向左的浮動。而content_b不應(yīng)用任何浮動。


　　我們看在IE6中的效果：


　　我們看在FF中的效果：


　　在IE中，對content_a應(yīng)用向左的浮動后，content_a向左浮動，content_b在水平方向僅跟著它的后面。
　　在FF中，對content_a應(yīng)用向左的浮動后，content_b在水平方向容器不可見，只留下了文字。
　　我們同時對這兩個容器應(yīng)用向左的浮動看看發(fā)生的現(xiàn)象。


　　在IE中的效果如圖：


　　在FF中的效果如圖：


　　在IE與FF中，他們的效果基本取得了一致。在布局中，我們可應(yīng)用這類IE與FF兼容的方法。

　　我們對content_b應(yīng)用向左的浮動。而content_a不應(yīng)用任何浮動�？纯词呛涡Ч���


　　在IE中的效果如圖：


　　在FF中的效果如圖：


　　在IE與FF中均未有太大的變化。在IE中，應(yīng)用浮動后的content_b卻造成了一個雙邊距的BUY。汗一個先。關(guān)于IE的雙邊距BUY請參考這里：http://m.hl5o.cn/article.asp?id=144

　　向左浮動會出現(xiàn)何種狀態(tài)呢？在向右浮動后，最大的變化就是在HTML中，前面的元素在最右邊，后面的元素跑到了最左邊。

　　我們對上面代碼中的兩個元素同時應(yīng)用向右的浮動看看效果。


　　在IE中的效果如圖：


　　在FF中的效果如圖：


　　同時對兩個元素應(yīng)用向右的浮動基本保持了一致，但請注重方向性，第二個在左邊，第一個在右邊。

　　對于其它頁面構(gòu)成元素，浮動的原理基本是一樣的，大家多動手測試，才能有更進一下的熟悉。學習CSS就是多動手，多寫代碼，必有收獲！