CSS浮動float屬性用法詳解
你對CSS浮動float屬性的使用是否了解，這里和大家分享一下，我們常常通過對div元素應用float浮動來進行布局，不但對整個版式進行規劃，也可以對一些基本元素如導航等進行排列。
DIV CSS布局：CSS浮動float屬性詳解
在傳統的表格布局中，我們對表格應該對齊方式對實現了對布局的應用，而應用Web標準構建網頁以后，float浮動屬性是布局中非常重要的屬性，我們常常通過對div元素應用float浮動來進行布局，不但對整個版式進行規劃，也可以對一些基本元素如導航等進行排列。
float屬性基本釋義：
該屬性的值指出了對象是否及如何浮動。當該屬性不等于none引起對象浮動時，對象將被視作塊對象(block-level)，即display屬性等于block。也就是說，浮動對象的display特性將被忽略。
float屬性的參數：
none：對象不浮動
left：對象浮在左邊
right：對象浮在右邊
下面我們通過一些測試來了解可能出現的一些情況，如果float取值為none則不會發生任何浮動，塊元素獨占一行，緊隨其后的塊元素將在新行中顯示，如下圖：
我們看下面的運行效果：
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這是第一個DIVdiv>
- <dividdivid="content_b">52CSS.com這是第二個DIVdiv>
- body>
- html>
[可先修改部分代碼再運行查看效果]#p#
我們對content_a應用向左的浮動。而content_b不應用任何浮動。
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這是第一個DIV向左浮動div>
- <dividdivid="content_b">52CSS.com這是第二個DIV不應用浮動div>
- body>
- html>
[可先修改部分代碼再運行查看效果]
我們看在IE6中的效果：
我們看在Firefox中的效果：
在IE中，對content_a應用向左的浮動后，content_a向左浮動，content_b在水平方向僅跟著它的后面。
在Firefox中，對content_a應用向左的浮動后，content_b在水平方向容器不可見，只留下了文字。這是由于未清除浮動所造成的現象，關于清除浮動，可以參考這里：http://www.52css.com/article.asp?id=132這就是IE與Firefox對此種情況的不同解決，我們在實際布局中，應該避免這樣的情況發生。
【編輯推薦】
