CSS浮动float属性用法详解-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对此种情况的不同解决，我们在实际布局中，应该避免这样的情况发生。

【编辑推荐】