CSS布局浮动(float)和定位(position)属性的区别和使用

今天看到有朋友留言问浮动和定位有什么区别，如何使用？今天找了篇文章，讲的比较通俗易懂，供大家参考
 
postion:relative是子块级元素面向父级元素的相对定位，定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位，但是position移动后，原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。
 
float:right/left是子块级元素流集合面向父级元素的定位，定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染，可以重叠，原位置被清空。
 
二者之中最大的差别就是位置保留。两者可以同时使用。
 
人们也就利用这种差异，可以做出CSS代码的滑动门菜单。
 
hover时取当前元素为保留位置，定义一个relative时，没有hover时使用float清空保留位置。
 
比较示例中的3个样式表，就可以发现：

<!--<style>
*{border:1px solid #eee;}
body{
border-color:#09f;
}
ul{list-style:none;width:800px;height:600px;margin:0 auto;padding:10px;}
li{float:left;}
#li1{width:200px;height:200px;border-color:red;}
#li2{width:200px;height:150px;border-color:green;margin-left:-20px;}
#li3{width:200px;height:100px;border-color:blue;margin-left:-20px;}
</style>-->
<!--<style>
*{border:1px solid #eee;}
body{
border-color:#09f;
}
ul{list-style:none;width:800px;height:600px;margin:0 auto;}
li{position:relative;}
#li1{width:200px;height:200px;border-color:red;top:10px;}
#li2{width:200px;height:150px;border-color:green;top:-192px;left:180px;}
#li3{width:200px;height:100px;border-color:blue;top:-344px;left:360px;}
</style>-->
<style>
*{border:1px solid #eee;}
body{
border-color:#09f;
}
#ul{list-style:none;width:800px;height:600px;margin:0 auto;padding:20px;}
#li1{width:200px;height:200px;border-color:red;position:relative;}
#li2{width:200px;height:150px;border-color:green;float:left;margin-left:-20px;margin-top:-202px;}
#li3{width:200px;height:100px;border-color:blue;float:left;margin-left:20px;margin-top:-202px;}
</style>
<ul id=#id>
<li id=li1>li1</li>
<li id=li2>li2</li>
<li id=li3>li3</li>
</ul>

 

文章出处：标准之路(http://www.aa25.cn/div_css/704.shtml)