新聞中心
你對CSS浮動float屬性的使用是否了解,這里和大家分享一下,我們常常通過對div元素應用float浮動來進行布局,不但對整個版式進行規(guī)劃,也可以對一些基本元素如導航等進行排列。

DIV CSS布局:CSS浮動float屬性詳解
在傳統(tǒng)的表格布局中,我們對表格應該對齊方式對實現(xiàn)了對布局的應用,而應用Web標準構建網(wǎng)頁以后,float浮動屬性是布局中非常重要的屬性,我們常常通過對div元素應用float浮動來進行布局,不但對整個版式進行規(guī)劃,也可以對一些基本元素如導航等進行排列。
float屬性基本釋義:
該屬性的值指出了對象是否及如何浮動。當該屬性不等于none引起對象浮動時,對象將被視作塊對象(block-level),即display屬性等于block。也就是說,浮動對象的display特性將被忽略。
float屬性的參數(shù):
none:對象不浮動
left:對象浮在左邊
right:對象浮在右邊
下面我們通過一些測試來了解可能出現(xiàn)的一些情況,如果float取值為none則不會發(fā)生任何浮動,塊元素獨占一行,緊隨其后的塊元素將在新行中顯示,如下圖:
我們看下面的運行效果:
SourceCodetoRun
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- content="text/html;charset=gb2312"/>
52CSS title> - #content_a{width:200px;height:80px;border:1pxsolid#000;
- margin:10px;background:#ccc;}
- #content_b{width:200px;height:80px;border:1pxsolid#000;
- margin:10px;background:#999;}
- style>
- head>
52CSS.com這是第一個DIV div> 52CSS.com這是第二個DIV div> - body>
- html>
[可先修改部分代碼再運行查看效果]#p#
我們對content_a應用向左的浮動。而content_b不應用任何浮動。
SourceCodetoRun
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- charset=gb2312"/>
52CSS title> - #content_a{width:200px;height:80px;float:left;border:1pxsolid#000;
- margin:10px;background:#ccc;}
- #content_b{width:200px;height:80px;border:1pxsolid#000;margin:10px;
- background:#999;}
- style>
- head>
52CSS.com這是第一個DIV向左浮動 div> 52CSS.com這是第二個DIV不應用浮動 div> - body>
- html>
[可先修改部分代碼再運行查看效果]
我們看在IE6中的效果:
我們看在Firefox中的效果:
在IE中,對content_a應用向左的浮動后,content_a向左浮動,content_b在水平方向僅跟著它的后面。
在Firefox中,對content_a應用向左的浮動后,content_b在水平方向容器不可見,只留下了文字。這是由于未清除浮動所造成的現(xiàn)象,關于清除浮動,可以參考這里:http://www.52css.com/article.asp?id=132這就是IE與Firefox對此種情況的不同解決,我們在實際布局中,應該避免這樣的情況發(fā)生。
【編輯推薦】
- CSS Sprites對CSS布局的意義
- 如何使用CSS框架這把雙刃劍?
- CSS中font-size屬性值四大種類
- 解析四大CSS屬性值選擇器用法
- 專家推薦 DIV CSS表單布局的五個小技巧
文章題目:CSS浮動float屬性用法詳解
文章出自:http://fisionsoft.com.cn/article/coehegp.html


咨詢
建站咨詢
