Question

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

Answer 1

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