在傳統的表格版面配置中，我們對錶格應該對齊對實現了對布局的應用，而應用Web標準構建網頁以後，float浮動屬性是布局中非
常重要的屬性，我們常常通過對div元素應用float浮動來進行布局，不但對整個版式進行規劃，也可以對一些基本元素如導航等進行排列。
我們來看看float屬性基本釋義：
該屬性的值指出了對象是否及如何浮動。當該屬性不等於none引起對象浮動時，對象將被視作塊對象(block-level)，即display屬性等於
block。也就是說，浮動物件的display特性將被忽略。
float屬性的參數：
none：對象不浮動
left：對象浮在左邊
right：對象浮在右邊
下面我們通過一些測試來瞭解可能出現的一些情況，如果float取值為none則不會發生任何浮動，塊元素獨佔一行，緊隨其後的塊元素將在新行中顯示，如
：
我們看下面的運行效果：
Code to Run">
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不應用任何浮動。
Code to Run">
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在水平方向容器不可見，只留下了文字。這是由於未清除浮動所造成的現象，關於清除浮
動，可以參考這裡：http://www.52css.com/article.asp?id=132
（overflow:auto;）這就是IE與FF對此種情況的不同解決，我們在實際布局中，應該避免這樣的情況發生。
我
們同時對這兩個容器應用向左的浮動看看發生的現象。
css xhtml xml Source Code to Run">
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中的效果
在FF中的效果
在IE與FF中，他們的效果基本取得了一致。在布局中，我們可應用這類IE與FF相容的方法。
我們對content_b應用向左的浮動。而content_a不應用任何浮動。看看是何效果：
Code to Run">
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;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中的效果
在FF中的效果
在IE與FF中均未有太大的變化。在IE中，應用浮動後的content_b卻造成了一個雙邊距的BUY。汗一個先。關於IE的雙邊距BUY請參考這裡：http://www.52css.com/article.asp?id=144
向左浮動會出現何種狀態呢？在向右浮動後，最大的變化就是在HTML中，前面的元素在最右邊，後面的元素跑到了最左邊。
我
們對上面代碼中的兩個元素同時應用向右的浮動看看效果。
css xhtml xml Source Code to Run">
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:right;
border:1px solid#000; margin:10px; background:#ccc;} #content_b
{width:200px;height:80px; float:right; 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中的效果
在FF中的效果
同時對兩個元素應用向右的浮動基本保持了一致，但請注意方向性，第二個在左邊，第一個在右邊。
對於其它頁面構成元素，浮動的原理基本是一樣的，大家多動手測試，才能有更進一下的認識。學習CSS就是多動手，多寫代碼，必有收穫！
