浮动(float)和定位(position)属性的区别和如何使用

来源：互联网发布：iroha 知乎编辑：程序博客网时间：2024/05/25 12:22

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

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

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

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

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

<!--<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>

0 0