CSS浮動float屬性用法詳解

作者：52css 2010-09-02 15:32:51

本文向大家描述一下CSS浮動屬性float的用法，在傳統的表格布局中，我們對表格應該對齊方式對實現了對布局的應用，而應用Web標準構建網頁以后，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對此種情況的不同解決，我們在實際布局中，應該避免這樣的情況發生。

【編輯推薦】

CSS Sprites對CSS布局的意義
如何使用CSS框架這把雙刃劍？
CSS中font-size屬性值四大種類
解析四大CSS屬性值選擇器用法
專家推薦 DIV CSS表單布局的五個小技巧

責任編輯：佚名來源： 52css.com

CSS float