CSS常用的布局方式主要有定位式和浮動式兩種，相應布局屬性為定位屬性（position）和浮動屬性（float）。
一、定位屬性（position）
使用position屬性可以精确控制盒子的位置，其文法格式如下。
position: static |relative | absolute | fixed
靜态定位
設定position屬性的值為static，或不做設定即預設時預設為static，元素按照HTML規則定位。
示例
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
#container {
width: 250px;
height: 250px;
border: medium #00C double;
}
</style>
</head>
<body>
<div id="container">
<div><img src="images/kay.gif" width="140px" height="120 px "/></div>
<div><img src="images/Neg.gif" width="140px " height="120px"/></div>
</div>
</body>
</html>
效果
相對定位
設定position屬性的值為relative時即為相對定位，設定盒子相對其原本位置的定位。相對定位的盒子占用原頁面空間。
示例
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#container {
width: 250px;
height: 250px;
border: medium #00C double;
left: 100px;
top: 0px;
}
#img1 {
position: relative;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div id="container">
<div><img id="img1" src="images/kay.gif" width="140px" height="120px"/></div>
<div><img src="images/Neg.gif" width="140px" height="120px"/></div>
</div>
</body>
</html>
效果
絕對定位
設定position屬性的值為absolute時即為絕對定位，設定盒子相對其具有position設定的父對象進行定位。
父對象有position屬性設定
示例
代碼
效果
父對象無position屬性設定
絕對定位元素的所有層次父對象均無position屬性設定時，該元素以body即浏覽視窗為參照絕對定位。如示例15-13中，删除A圖檔父對象position屬性設定，即删除如下代碼行：
position: relative;
left:0px;
top:0px;
層疊定位屬性（z-index）
被定位的元素會擋住部分其他元素，可以通過層疊定位屬性（z-index）定義頁面元素的層疊次序。z-index的取值可以為負數，表示各元素間層次關系，值大者在上，當為負數時表示該元素位于頁面之下。
示例
代碼
效果
二、浮動屬性（float）
float屬性可以控制盒子左右浮動，直到邊界碰到父對象或另一個浮動對象。
float屬性文法格式如下。
float:none|left|right;
基本浮動定位
設定了向左或向右浮動的盒子，整個盒子會做相應的浮動。浮動盒子不再占用原本在文檔中的位置，其後續元素會自動向前填充，遇到浮動對象邊界則停止。
示例
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
img {
width: 140px;
height: 120px;
}
.fl {
float: left;
}
</style>
</head>
<body>
<div class="fl"><img src="images/kay.gif"/></div>
<div class="fl"><img src="images/Neg.gif"/></div>
<div><img src="images/jobs.gif"/></div>
</body>
</html>
效果
清除浮動屬性
浮動設定使使用者能夠更加自由友善地布局網頁，但有時某些盒子可能需要清除浮動設定，這時需要用到浮動屬性clear，其文法格式如下：
clear:none|left|right|both;
示例
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
img {
width: 140px;
height: 120px;
}
.fleft {
float: left;
}
.clear {
clear: left;
}
</style>
</head>
<body>
<div class="fleft"><img src="images/kay.gif"/></div>
<div class="fleft"><img src="images/Neg.gif"/></div>
<div class="clear"><img src="images/jobs.gif"/></div>
</body>
</html>