CSS中有三种基本的定位机制：普通流，浮动和绝对定位。
1.相对定位：relative
如果对一个元素进行相对定位，它将出现在它所在的位置上，然后可以通过设置垂直或者水平位置，让这个元素“相对于”它原来的位置进行移动，这时元素依然占据原来的位置，但移动后会覆盖其他的元素，可以通过z-index属性来对其显示位置进行设置。
#mybox{ position:relative; left:20px; top:20px; }
2.绝对定位：absolute
相对定位实际上依然是存在文档流中，但绝对定位则会使元素脱离文档流，绝对定位的元素是相对于距离他最近得已定位的祖先元素确定的，如果元素没有已定位的祖先元素，那么它的位置是相对于初始包含块的。
绝对定位同样可以通过z-index来对其设置叠放层次。
3.固定定位：
顾名思义，固定在浏览器某一位置。
4.浮动：float
浮动的框可以左右移动，直至其碰到包含框或另一浮动框的边缘。浮动同样会使元素脱离文档流。
上面说浮动会使元素脱离文档流，文档流中的元素会将其当做不存在，实际上并非如此。当下一个元素存在文本内容时，文本内容会受到浮动元素的影响，会移动留出空间，实际上。创建浮动框使文本围绕图像。即浮动元素旁边的行框被缩短。
要想阻止浮动元素对行框的影响，可以对包含这些行框的元素应用clear属性，其值可以是left,right,both或None;它表示框的那些边不应该挨着浮动框，其实质是浏览器对这些元素添加了一个外边距，使其下降位置到浮动框下边。
通过更多例子来说明浮动和清理,假设有一个图片和文本，你想让图片在左，文本在右，两者被包含在一个div中。
.news{ background-color:gray; border:1px solid black; } .news img{ float:left; } .news p{ float:right; } <div> <img src=""/> <p>some thing</p> </div>
由于浮动元素不占据空间，所以运行结果如下图：
解决办法通常有三种：
1.添加一个新的div空元素在news里面，并对其设置clear属性，浏览器会自动赋予外边距。如图：
缺点：添加无意义的元素。
2.也可以对父元素添加overflow:hidden属性，该属性会自动清理包含的任何浮动元素。
缺点：可能会对原来的布局有所影响，例如增加滚动条或截断内容。
3.使用js代码动态控制。