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>
效果
三、总结
这一部分是CSS网页设计中的核心部分，要想用CSS美化网页，这一部分至关重要，他直接关系到网页图片的位置和网页的排版，由于我是学Java后端的，对前端了解的不是很深，所以只是给大家介绍个大概，帮你们梳理一下脉络，不敢班门弄斧，反正这一块要格外重视。
