DIVCSS布局:CSS浮動float屬性詳解_CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
MB5U.com原創,未經本站同意,嚴禁轉載!
在傳統的表格布局中,我們對表格應該對齊方式對實現了對布局的應用,而應用Web標準構建網頁以后,float浮動屬性是布局中非常重要的屬性,我們經常通過對div元素應用float浮動來進行布局,不但對整個版式進行規劃,也可以對一些基本元素如導航等進行排列。
我們來看看float屬性基本釋義:
該屬性的值指出了對象是否及如何浮動。當該屬性不等于none引起對象浮動時,對象將被視作塊對象(block-level),即display屬性等于block。也就是說,浮動對象的display特性將被忽略。
float屬性的參數:
none:對象不浮動
left:對象浮在左邊
right:對象浮在右邊
下面我們通過一些測試來了解可能出現的一些情況,假如float取值為none則不會發生任何浮動,塊元素獨占一行,緊隨其后的塊元素將在新行中顯示,如下圖:
我們看下面的運行效果:
代碼調試框 [www.zhaotila.cn]
[ 可先修改部分代碼 再運行查看效果 ]
我們對content_a應用向左的浮動。而content_b不應用任何浮動。
代碼調試框 [www.zhaotila.cn]
[ 可先修改部分代碼 再運行查看效果 ]
我們看在IE6中的效果:
我們看在FF中的效果:
在IE中,對content_a應用向左的浮動后,content_a向左浮動,content_b在水平方向僅跟著它的后面。
在FF中,對content_a應用向左的浮動后,content_b在水平方向容器不可見,只留下了文字。
我們同時對這兩個容器應用向左的浮動看看發生的現象。
代碼調試框 [www.zhaotila.cn]
[ 可先修改部分代碼 再運行查看效果 ]
在IE中的效果如圖:
在FF中的效果如圖:
在IE與FF中,他們的效果基本取得了一致。在布局中,我們可應用這類IE與FF兼容的方法。
我們對content_b應用向左的浮動。而content_a不應用任何浮動?纯词呛涡Ч
代碼調試框 [www.zhaotila.cn]
[ 可先修改部分代碼 再運行查看效果 ]
在IE中的效果如圖:
在FF中的效果如圖:
在IE與FF中均未有太大的變化。在IE中,應用浮動后的content_b卻造成了一個雙邊距的BUY。汗一個先。關于IE的雙邊距BUY請參考這里:http://www.zhaotila.cn/article.asp?id=144
向左浮動會出現何種狀態呢?在向右浮動后,最大的變化就是在HTML中,前面的元素在最右邊,后面的元素跑到了最左邊。
我們對上面代碼中的兩個元素同時應用向右的浮動看看效果。
代碼調試框 [www.zhaotila.cn]
[ 可先修改部分代碼 再運行查看效果 ]
在IE中的效果如圖:
在FF中的效果如圖:
同時對兩個元素應用向右的浮動基本保持了一致,但請注重方向性,第二個在左邊,第一個在右邊。
對于其它頁面構成元素,浮動的原理基本是一樣的,大家多動手測試,才能有更進一下的熟悉。學習CSS就是多動手,多寫代碼,必有收獲!
在傳統的表格布局中,我們對表格應該對齊方式對實現了對布局的應用,而應用Web標準構建網頁以后,float浮動屬性是布局中非常重要的屬性,我們經常通過對div元素應用float浮動來進行布局,不但對整個版式進行規劃,也可以對一些基本元素如導航等進行排列。
我們來看看float屬性基本釋義:
該屬性的值指出了對象是否及如何浮動。當該屬性不等于none引起對象浮動時,對象將被視作塊對象(block-level),即display屬性等于block。也就是說,浮動對象的display特性將被忽略。
float屬性的參數:
none:對象不浮動
left:對象浮在左邊
right:對象浮在右邊
下面我們通過一些測試來了解可能出現的一些情況,假如float取值為none則不會發生任何浮動,塊元素獨占一行,緊隨其后的塊元素將在新行中顯示,如下圖:

我們看下面的運行效果:
代碼調試框 [www.zhaotila.cn][ 可先修改部分代碼 再運行查看效果 ]
我們對content_a應用向左的浮動。而content_b不應用任何浮動。
代碼調試框 [www.zhaotila.cn][ 可先修改部分代碼 再運行查看效果 ]
我們看在IE6中的效果:

我們看在FF中的效果:

在IE中,對content_a應用向左的浮動后,content_a向左浮動,content_b在水平方向僅跟著它的后面。
在FF中,對content_a應用向左的浮動后,content_b在水平方向容器不可見,只留下了文字。
我們同時對這兩個容器應用向左的浮動看看發生的現象。
代碼調試框 [www.zhaotila.cn][ 可先修改部分代碼 再運行查看效果 ]
在IE中的效果如圖:

在FF中的效果如圖:

在IE與FF中,他們的效果基本取得了一致。在布局中,我們可應用這類IE與FF兼容的方法。
我們對content_b應用向左的浮動。而content_a不應用任何浮動?纯词呛涡Ч
代碼調試框 [www.zhaotila.cn][ 可先修改部分代碼 再運行查看效果 ]
在IE中的效果如圖:

在FF中的效果如圖:

在IE與FF中均未有太大的變化。在IE中,應用浮動后的content_b卻造成了一個雙邊距的BUY。汗一個先。關于IE的雙邊距BUY請參考這里:http://www.zhaotila.cn/article.asp?id=144
向左浮動會出現何種狀態呢?在向右浮動后,最大的變化就是在HTML中,前面的元素在最右邊,后面的元素跑到了最左邊。
我們對上面代碼中的兩個元素同時應用向右的浮動看看效果。
代碼調試框 [www.zhaotila.cn][ 可先修改部分代碼 再運行查看效果 ]
在IE中的效果如圖:

在FF中的效果如圖:

同時對兩個元素應用向右的浮動基本保持了一致,但請注重方向性,第二個在左邊,第一個在右邊。
對于其它頁面構成元素,浮動的原理基本是一樣的,大家多動手測試,才能有更進一下的熟悉。學習CSS就是多動手,多寫代碼,必有收獲!
相關CSS教程:
- 相關鏈接:
- 教程說明:
CSS教程-DIVCSS布局:CSS浮動float屬性詳解
。