Question

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

Answer 1

　　float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果.

position: absolute|relative; 要配合top,left等定位;

　　position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现，可以设置z-index。PS的图层效果就是position: absolute。

　　float也会导致元素脱离文档流，但还在文档或容器中占据位置，把文档流和其它float元素向左或向右挤，并可能导致换行。图片的文字环绕布局效果就是float。

　　display的inline-block不脱离文档流，将block元素当作大型字符嵌入文档流内，类似于img或者input默认效果。

Answer 2

postion:relative是子块级元素面向父级元素的相对定位，定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位，但是position移动后，原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。 float:right/left是子块级元素流集合面向父级元素的定位，定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染，可以重叠，原位置被清空。 二者之中最大的差别就是位置保留。 人们也就利用这种差异，可以做出CSS代码的滑动门菜单。 hover时取当前元素为保留位置，定义一个relative时，没有hover时使用float清空保留位置。 比较示例中的3个样式表，就可以发现： <!--<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=li1li1</li

Answer 3

Vue实践-CSS样式position/display/float属性对比使用