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

如题所述

今天看到有朋友留言问浮动和定位有什么区别,如何使用?今天找了篇文章,讲的比较通俗易懂,供大家参考postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。float:right/left是子块级元素流集合面向父级元素的定位,定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染,可以重叠,原位置被清空。二者之中最大的差别就是位置保留。比较示例中的3个样式表,就可以发现: *{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;} li1 li2 li3 提示:可以先修改部分代码后再运行 (如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!
温馨提示:答案为网友推荐,仅供参考