CSS布局浮动(float)和定位(position)属性的区别-51CTO.COM

你对CSS布局浮动(float)和定位(position)属性的区别是否熟悉，这里向大家简单介绍一下，postion:relative是子块级元素面向父级元素的相对定位，定位关键字使用left/right/top/bottom，而float:right/left是子块级元素流集合面向父级元素的定位，定位的关键词使用margin/padding。

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

postion:relative是子块级元素面向父级元素的相对定位，定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位，但是position移动后，原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。

float:right/left是子块级元素流集合面向父级元素的定位，定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染，可以重叠，原位置被清空。

二者之中最大的差别就是位置保留。

人们也就利用这种差异，可以做出CSS代码的滑动门菜单。

hover时取当前元素为保留位置，定义一个relative时，没有hover时使用float清空保留位置。

比较示例中的3个样式表，就可以发现：

<!--<style> 
*{border:1pxsolid#eee;}  
body{  
border-color:#09f;  
}  
ul{list-style:none;width:800px;height:600px;  
margin:0auto;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:1pxsolid#eee;}  
body{  
border-color:#09f;  
}  
ul{list-style:none;width:800px;  
height:600px;margin:0auto;}  
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:1pxsolid#eee;}  
body{  
border-color:#09f;  
}  
#ul{list-style:none;width:800px;  
height:600px;margin:0auto;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> 
<ulidulid=#id> 
<liidliid=li1>li1</li> 
<liidliid=li2>li2</li> 
<liidliid=li3>li3</li> 
</ul>

【编辑推荐】