http://apps.hi.baidu.com/share/detail/3622045
http://blog.myspace.cn/e/402269226.htm
这两个讲的很详细了。
新建一个html网页，在body中插入【<div class="content"></div>】并引入CSS【.content{width: 420pxheight: 100pxbackground: #d4d4d4padding: 5px 0 5px 5px}】。
请点击输入图片描述
在大DIV中插入一个DIV【<div class="a"></div>】并引入CSS【.a{width: 100pxheight: 100pxmargin-right: 5pxbackground: #ff0000}】定义它的高，宽，外边距，背景色。
请点击输入图片描述
继续添加一个同级的DIV【<div class="a b"></div>】并引入样式a和样式b，样式B只定义背景色【.b{background: #FF5F00}】。可以看到第2个DIV排到了第一个的下方位置。
请点击输入图片描述
按照同样的方法再添加2个同级的DIV并引入不同颜色的DIV【<div class="a c"></div><div class="a d"></div>】。然后引入CSS【.c{background: #FFED00}.d{background: #00FF93}】。刷新后可以看到预览效果是4个IDV垂直排列的，怎么能让他们水平排列在一行呢？
请点击输入图片描述
为了方便朋友们查看顺序，把4个DIV分别插入一个数字，相当于给他们编一个号码。
请点击输入图片描述
接下来就要用到浮动代码了。在4个DIV共用的a样式中，加入左浮动【float: left】。保存并刷新网页可以看到已经都在一行上了，而且是按照编码顺序从左到右排列的。
请点击输入图片描述
我们再来试一下右浮动【float:right】，可以看到DIV是从右向左排列的。现在朋友们知道怎么使用浮动代码了吗？
请点击输入图片描述
相对定位，在其默认显示的位置的基础上，通过上下左右四个参数设置偏移一定的距离，但是仅仅是显示出来的效果偏移了，但它实际还占用着原来的位置
如果div的position设置了relative属性，但是没有指定偏移量，则默认为position：static。
绝对定位， 浮动元素脱离文档流，偏移后元素不再占用了原来的位置，原位置将由后面的元素取代，默认以除static（一般元素默认的定位都是static）定位的第一个元素为参考进行定位 ，元素的位置通过top，right，bottom，left属性进行规定，若外部没有其他定位元素，则以浏览器左上角为参考原点。
例如：如果想指定元素div1作为参考原点，则div1应该加上position：relative（所以absolute常搭配relative使用）
浮动元素脱离文档流 ，元素水平方向浮动起来，只能向左或向右移动，通过float:left（right）设置左右浮动
设置浮动后出现两个问题：
1、设置浮动后周围元素会重新排列
2、怎么实现垂直排列
解决上面的问题需要用到清理浮动，关键字clear
清除浮动的关键字是clear，官方定义如下：
用法 ：
clear : none | left | right | both
含义：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
注意 ：clear属性只能影响元素本身，不能影响其他元素
假如div1和div2均设置了向左浮动，则两个元素水平并列向左排列分别为div1,div2，如果想div2独占一行，则需要给div2设置clear:left,表示清理div2左侧浮动（实际div1浮动并未清理），div2下移一行。
