在传统的表格布局中,我们对表格应该对齐方式对实现了对布局的应用,而应用Web标准构建网页以后,float浮动属性是布局中非常重要的属性,我们常常通过对div元素应用float浮动来进行布局,不但对整个版式进行规划,也可以对一些基本元素如导航等进行排列。
我们来看看float属性基本释义:
该属性的值指出了对象是否及如何浮动。当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。
float属性的参数:
none:对象不浮动
left:对象浮在左边
right:对象浮在右边
下面我们通过一些测试来了解可能出现的一些情况,如果float取值为none则不会发生任何浮动,块元素独占一行,紧随其后的块元素将在新行中显示,如下图:
我们看下面的运行效果:
Source Code to Run [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type" content="text/html; charset=gb2312" /><title>52CSS</title> <style type="text/css">#content_a {width:200px; height:80px; border:1px solid #000;margin:10px; background:#ccc;} #content_b {width:200px; height:80px;border:1px solid #000; margin:10px; background:#999;} </style></head> <body> <div id="content_a">52CSS.com这是第一个DIV</div> <div id="content_b">52CSS.com这是第二个DIV</div> </body> </html>
[ 可先修改部分代码 再运行查看效果 ]
我们对content_a应用向左的浮动。而content_b不应用任何浮动。
Source Code to Run [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type" content="text/html; charset=gb2312" /><title>52CSS</title> <style type="text/css">#content_a {width:200px; height:80px; float:left; border:1px solid#000; margin:10px; background:#ccc;} #content_b {width:200px;height:80px; border:1px solid #000; margin:10px; background:#999;}</style> </head> <body> <divid="content_a">52CSS.com 这是第一个DIV 向左浮动</div> <divid="content_b">52CSS.com 这是第二个DIV 不应用浮动</div> </body></html>
[ 可先修改部分代码 再运行查看效果 ]
我们看在IE6中的效果:
我们看在FF中的效果:
在IE中,对content_a应用向左的浮动后,content_a向左浮动,content_b在水平方向仅跟着它的后面。
在FF中,对content_a应用向左的浮动后,content_b在水平方向容器不可见,只留下了文字。这是由于未清除浮动所造成的现象,(overflow:auto;)这就是IE与FF对此种情况的不同解决,我们在实际布局中,应该避免这样的情况发生。
我们同时对这两个容器应用向左的浮动看看发生的现象。
Source Code to Run [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type" content="text/html; charset=gb2312" /><title>52CSS</title> <style type="text/css">#content_a {width:200px; height:80px; float:left; border:1px solid#000; margin:10px; background:#ccc;} #content_b {width:200px;height:80px; float:left; border:1px solid #000; margin:10px;background:#999;} </style> </head> <body> <divid="content_a">52CSS.com 这是第一个DIV 向左浮动</div> <divid="content_b">52CSS.com 这是第二个DIV 向左浮动</div> </body></html>
[ 可先修改部分代码 再运行查看效果 ]
在IE中的效果如图: