关于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>

分别运行，查看一下运行效果。

关于CSS中的float和position

标签：

原文地址：http://blog.csdn.net/mozes1/article/details/42174431