页面的设计需要通过摆放不同的模块在不同的位置，这个时候需要使用到定位和浮动的知识点，CSS3定位功能是很强大的，利用它你可以做出各种各样的网络布局。
1、CSS定位
1）定位机制
普通流：元素按照其在HTML中的位置顺序觉得排布的过程
浮动
绝对布局
2）定位属性
positon、top、left、right、bottom、overflow（设置元素溢出区域发生的事情）、clip（设置元素显示的形状）、vertical-align（设置元素垂直对齐的方式）、z-index（设置元素的堆叠顺序）
position有4个值：relative--相对布局 absolute--绝对布局 fixed--固定 static（top/left/right/bottom的偏移量不起作用）
<body>
<div id="position1">
</div>
<script>
for(var i=0; i<100; i++){
document.write(i+"<br>");
}
</script>
</body>
对应的CSS文件：
#position1{
width: 100px;
height: 100px;
left:50px;
background-color: blue;
position:fixed;
/*z-index: 1;*/
/*布局中有覆盖时，z-index更大的值，覆盖在上面*/
}
2、CSS浮动
CSS的float属性的值：left--元素向左浮动 left--元素向右浮动 none--元素不浮动 inherit--从父级继承浮动属性
clear属性：去掉浮动
<div id="container">
<div id="fd"></div>
<div id="sd"></div>
<div id="td"></div>
<div id="txt">hello</div>
</div>
</body>
对应的CSS文件：
#fd{
width: 100px;
height: 100px;
background-color: red;
float: right;
}
#sd{
width: 100px;
height: 100px;
background-color: blue;
}
#td{
width: 100px;
height: 100px;
background-color: green;
float: right;
}
#container {
width: 500px;
height: 300px;
background-color: gray;
}
#txt{
float:right;
/*clear:right;*/
}
3、CSS浮动的应用
<body>
<div id="div1">
<ul>
<li><img src="1.jpg" width="400px" ></li>
<li><img src="2.jpg" width="400px"></li>
<li><img src="3.jpg" width="400px"></li>
</ul>
<ul>
<li><img src="4.jpg" width="400px"></li>
<li><img src="5.jpg" width="400px"></li>
<li><img src="6.jpg" width="400px"></li>
</ul>
<ul>
<li><img src="7.jpg" width="400px"></li>
<li><img src="8.jpg" width="400px"></li>
<li><img src="9.jpg" width="400px"></li>
</ul>
</div>
</body>
对应的CSS文件：
*{
margin: 0px;
padding: 0px;
}
li{
list-style: none;
}
#div1{
width:950px;
height: auto;
margin:20px auto;
}
ul{
width: 400px;
float: right;
}