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

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

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

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

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


　　我們看下面的運(yùn)行效果：


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


　　我們看在IE6中的效果：


　　我們看在FF中的效果：


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


　　在IE中的效果如圖：


　　在FF中的效果如圖：


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

　　我們對(duì)content_b應(yīng)用向左的浮動(dòng)。而content_a不應(yīng)用任何浮動(dòng)。看看是何效果：


　　在IE中的效果如圖：


　　在FF中的效果如圖：


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

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

　　我們對(duì)上面代碼中的兩個(gè)元素同時(shí)應(yīng)用向右的浮動(dòng)看看效果。


　　在IE中的效果如圖：


　　在FF中的效果如圖：


　　同時(shí)對(duì)兩個(gè)元素應(yīng)用向右的浮動(dòng)基本保持了一致，但請(qǐng)注重方向性，第二個(gè)在左邊，第一個(gè)在右邊。

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