关于CSS中的float和position
postion:relative是子块级元素面向父级元素的相对定位，定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位，但是position移动后，原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。
float:right/left是子块级元素流集合面向父级元素的定位，定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染，可以重叠，原位置被清空。
二者之中最大的差别就是位置保留。
float定位：
<style>
*{border:1px solid #eee;}
body{
border-color:#09f;
}
ul{list-style:none;}
li{float:left;}
#li1{width:200px;height:200px;border-color:red;}
#li2{width:200px;height:150px;border-color:green;}
#li3{width:200px;height:100px;border-color:blue;}
</style>
<ul id=#id>
<li id=li1>li1</li>
<li id=li2>li2</li>
<li id=li3>li3</li>
</ul>
position:relative定位：
<style>
*{border:1px solid #eee;}
body{
border-color:#09f;
}
ul{list-style:none;width:800px;height:400px;margin:0 auto; border-color:black;}
li{position:relative;}
#li1{width:200px;height:200px;border-color:red;top:20px;}
#li2{width:200px;height:150px;border-color:green;}
#li3{width:200px;height:100px;border-color:blue;}
</style>
<ul id=#id>
<li id=li1>li1</li>
<li id=li2>li2</li>
<li id=li3>li3</li>
</ul>
分别运行，查看一下运行效果。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
