在進行CSS網頁布局時，對元素與容器進行布置與規劃，最常用的兩個屬性就是浮動float和定位position。這兩個屬性的理解對CSS網頁布局的學習非常重要。我們52CSS.com就這兩個屬性的相關知識與實例，發布本文，希望對您的工作學習有幫助。

首先了解float（浮動）和position（定位）屬性的基礎知識：

float（浮動）屬性：

　　float:none|left|right?
　　取值：
　　　　none:?默認值。對象不飄浮
　　　　left:?文本流向對象的右邊
　　　　right:?文本流向對象的左邊?

float（浮動）屬性的一個實例（一行兩列）：?

Example Source Code [www.52css.com] xhtml代碼:
<div?id="wrap">?
<div?id="column1">這里是第一列</div>?
<div?id="column2">這里是第二列</div>?
<div?class="clear"></div>?<!--元素需要清除浮動?但可能與Web標準意圖相背-->?
</div>
CSS代碼:
#wrap{width:100px;?margin:0?auto;}?
#column1{float:left;width:40px;}?
#column2{float:right;width:60px;}?
.clear{clear:both;}
position（定位）屬性：

　　position:static|absolute|fixed|relative
　　取值：
　　　　static:?默認值。無特殊定位，對象遵循HTML定位規則
　　　　absolute:?將對象從文檔流中拖出，使用left，right，top，bottom等屬性
　　　　　　　　?相對于其最接近的一個最有定位設置的父對象進行絕對定位。
　　　　　　　　?如果不存在這樣的父對象，則依據body對象。而其層疊通過z-index屬性定義
　　　　fixed:?未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規范
　　　　relative:?對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置?

position（定位）屬性的一個實例（一行兩列）：?

Example Source Code [www.52css.com] xhtml代碼:
<div?id="wrap">?
<div?id="column1">這里是第一列</div>?
<div?id="column2">這里是第二列</div>?
</div>
css代碼:
#wrap{position:relative;width:300px;}?
#column1{position:absolute;top:0;left:0;width:200px;}?
#column2{position:absolute;top:0;right:0;width:100px;}?
float（浮動）和position（定位）屬性的區別

　　顯然，float是相對定位的，會隨著瀏覽器的大小和分辨率的變化而改變，而position就不行了，所以一般情況下還是float布局！在局部可能會用到position進行定位！請參考52CSS.com更多相關文章：
　　DIV?CSS布局：CSS浮動float屬性詳解
　　http://www.52css.com/article.asp?id=576
　　CSS?Float?Layout?Basics?-?CSS浮動布局基礎
　　http://www.52css.com/article.asp?id=556
　　CSS中Float（浮動）相關文摘
　　http://www.52css.com/article.asp?id=534
　　Div+CSS教程：如何閉合浮動元素？
　　http://www.52css.com/article.asp?id=697
　　CSS定位屬性的應用
　　http://www.52css.com/article.asp?id=52

查看一些float（浮動）和position（定位）的CSS布局實例：

單行一列

Example Source Code [www.52css.com] body{margin:0px;padding:0px;text-align:center;}?
#content{margin:0?auto;width:400px;}?
兩行一列?

Example Source Code [www.52css.com] body{margin:0px;padding:0px;text-align:center;}?
#content-top{margin:0?auto;?width:400px;}?
#content-end{margin:0?auto;?width:400px;}?
三行一列

Example Source Code [www.52css.com] body{margin:0px;padding:0px;text-align:center;}?
#content-top{margin:0?auto;?width:400px;}?
#content-mid{margin:0?auto;?width:400px;}?
#content-end{margin:0?auto;?width:400px;}
單行兩列

Example Source Code [www.52css.com] #bodycenter{width:700px;margin:0?auto;overflow:auto;}?
#bodycenter#dv1{float:left;width:280px;}?
#bodycenter#dv2{float:right;width:420px;}?
兩行兩列
Example Source Code [www.52css.com] #header{width:700px;margin:0?auto;overflow:auto;}?
#bodycenter{width:700px;margin:0?auto;overflow:auto;}?
#bodycenter#dv1{float:left;width:280px;}?
#bodycenter#dv2{float:right;width:420px;}?
三行兩列

Example Source Code [www.52css.com] #header{width:700px;margin:0?auto;}?
#bodycenter{width:700px;margin:0?auto;}?
#bodycenter#dv1{float:left;width:280px;}?
#bodycenter#dv2{float:right;width:420px;}?
#footer{width:700px;margin:0?auto;overflow:auto;clear:both;}?
單行三列（絕對定位）?

Example Source Code [www.52css.com] #left{position:absolute;top:0px;left:0px;width:120px;}?
#middle{margin:0?120px?0?120px;}?
#right{position:absolute;top:0;right:0;width:120px;}?
float定位

Example Source Code [www.52css.com] xhtml代碼:
<div?id="wrap">?
<div?id="column">?
??<div?id="column1">這里是第一列</div>?
??<div?id="column2">這里是第二列</div>?
??<div?class="clear"></div>?<!--元素需要清除浮動?但可能與Web標準意圖相背-->?
</div>?
<divid="column3">這里是第三列</div>?
<divclass="clear"></div>?<!--元素需要清除浮動?但可能與Web標準意圖相背-->?
</div>?
css代碼:
#wrap{width:300px;}?
#column{float:left;width:200px;}?
#column1{float:left;width:120px;}?
#column2{float:right;width:80px;}?
#column3{float:right;width:100px;}?
.clear{clear:both;}? 轉自：http://www.52css.com/article.asp?id=776

總結

以上是生活随笔為你收集整理的CSS布局最常用属性float（浮动）和position（定位）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。