MB5U.com原創，未經本站同意，嚴禁轉載！

　　在傳統的表格布局中，我們對表格應該對齊方式對實現了對布局的應用，而應用Web標準構建網頁以后，float浮動屬性是布局中非常重要的屬性，我們經常通過對div元素應用float浮動來進行布局，不但對整個版式進行規劃，也可以對一些基本元素如導航等進行排列。

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

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

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


　　我們看下面的運行效果：


　　我們對content_a應用向左的浮動。而content_b不應用任何浮動。


　　我們看在IE6中的效果：


　　我們看在FF中的效果：


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


　　在IE中的效果如圖：


　　在FF中的效果如圖：


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

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


　　在IE中的效果如圖：


　　在FF中的效果如圖：


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

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

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


　　在IE中的效果如圖：


　　在FF中的效果如圖：


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

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