不同点：
float仍会占据其位置，position会覆盖文档流中的其他元素。
其实这个命题有误，只有position才是定位，float不能说是定位，不过你可以说这两种布局方式有什么不同。
float和position这两者并没有孰好孰不好的问题，两者按需使用，各得所需的效果。
float
从字面上的意思就是浮动，这种在印刷排版之类中可能解释的更加贴切。float能让元素从文档流中抽出，它并不占文档流的空间，典型的就是图文混排中文字
环绕图片的效果了。并且float这也是目前使用最多的网页布局方式。不过需要注意的是清除浮动是你可能需要注意的地方。并且如果你要考虑到古老的IE6
之类的还会有一些bug诸如双边距等等问题。
而position顾名思义就是定位。他有以下这几种属性：static(默
认)，relative(相对定位)，absolute(绝对定位)和fixed(固定定位)。其中static和relative会占据文档流空间，他
们并不是脱离文档的。absolute和fixed是脱离文档流的，不会占据文档流空间。
比较可以发现，float和position最
大的区别其实是是否占据文档流空间的问题。虽然position有absolute和fixed这两个同样不会占据文档流的属性，但是这两个并不适合被用
来给整个网页做布局。为什么？因为这样你就得为页面上的每一个元素设置一个xy坐标来定位。
float布局就显得灵活多了。但是一些特殊
的地方搭配relative和absolute布局可以实现更好的效果。因为absolute是基于父级元素的定位，当父级元素是relative的时
候，absolute的元素就会是基于它的定位了。比如你可以让一个按钮始终显示在一个元素的右下角。
如果说到性能问题reflow问
题，将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在，而浏览器在需要渲染时只需要渲染该元素
以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间。所以如果是制作js动画等，用absolute或者fixed定位会更好。
说得不好的地方请大家补充。总结一句就是不推荐用position来布局整个页面的大框架，而推荐用float或者文档流的默认方式。
CSS中的float浮动属性，一般用于标签对象（例如：<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签）的浮动布局，而浮动也就是我们常说的标签对象居左靠左和居右靠右）。同时float浮动属性一般只对块级元素有效。“块级元素你可以通俗的理解为占一行并且大小可以控制的元素”。
float的属性值：left（靠左浮动），right（靠右浮动），none（不使用浮动，为默认值）
float属性的使用案例：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.divcss5{ width:400pxpadding:10pxborder:1px solid #F00}
.divcss5_left{ float:leftwidth:150pxborder:1px solid #00Fheight:50px}
.divcss5_right{ float:rightwidth:150pxborder:1px solid #00Fheight:50px}
.clear{ clear:both}
</style>
</head>
<body>
<div class="divcss5">
<div class="divcss5_left">布局靠左浮动</div>
<div class="divcss5_right">布局靠右浮动</div>
<div class="clear"></div><!--清除float产生浮动-->
</div>
</body>
</html>
运行效果：
