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