position和float的使用小结

1、position用于对元素进行定位，position属性规定了元素的定位类型，使用left、right、bottom、left进行具体位置的调整，position属性有absolute、relative、fixed、static等属性。

使用的时候有以下几点需要注意:

• absolute 是相对于声明了relative的父元素来进行定位的，父元素不局限于浏览器窗口
• fixed只能相对于浏览器窗口进行定位。
• 当子元素设置position: absolute;并且他的父元素没有设置position: relative;时（之前的理解是，这时候子元素应该自动相对于body定位的）这时如果没有设置left、top、right、bottom等值的话，子元素依然还会位于他的父元素的(0，0)的位置，即子元素这时的位置默认不是(0，0)而是他自己在原来文档流中的位置。

.position-box{position: absolute;}/*子元素如果不设置left、top、bottom等值的时候
                   元素默认是在原来的位置,而不是相对于body定位在(0,0)的位置*/

2、float 定义元素在哪个方向浮动,元素的浮动只能在父元素范围内浮动，使用很普遍，如横向菜单栏的实现。

使用的时候有以下几点需要注意:

• 布局的时候，float和position以及margin、padding可以同时使用不存在冲突(前提是下一个元素已经清除了浮动，否则设置间距无效)。
• 元素使用float之后，元素会脱离文档流，这时候父元素会不占高度，下面的元素则默认会在使用float元素的文档位置，如果想让父元素占高度，可以给父元素添加属性display: table;即可还可以写一个空的公共div，专门用来清除浮动。如：

.clear-float{clear: both;}/*可以作为公共样式使用*/

.parent{display: table;}/*这时父元素的高度会被撑开,设置背景颜色可以看得到*/

• 给父元素添加属性display: table；之后，父元素才可以具有高度，所以如果在需要给父元素设置特殊颜色的时候，可以使用display: table;其他情况使用clear来清除浮动。