在 CSS 布局中，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或者文档流的默认方式。