易混淆·的·布局问题

在网页的布局上，经常会存在一行需要并行很多区块的时候，这种情况下我们通常的解决方法就分为元素浮动（float）和定位(position)了

     float 从字面上的意思就是浮动，这种在印刷排版之类中可能解释的更加贴切。float能让元素从文档流中抽出，它并不占文档流的空间，典型的就是图文混排中文字环绕图片的效果了。并且float这也是目前使用最多的网页布局方式。不过需要注意的是清除浮动是你可能需要注意的地方。并且如果你要考虑到古老的IE6之类的还会有一些bug诸如双边距等等问题。

      而position顾名思义就是定位。他有以下这几种属性：static(默认)，relative(相对定位)，absolute(绝对定位)和fixed(固定定位)。其中static和relative会占据文档流空间，他们并不是脱离文档的。absolute和fixed是脱离文档流的，不会占据文档流空间。

    比较可以发现，float和position最大的区别其实是是否占据文档流空间的问题。虽然position有absolute和fixed这两个同样不会占据文档流的属性，但是这两个并不适合被用来给整个网页做布局。为什么？因为这样你就得为页面上的每一个元素设置一个xy坐标来定位。也经常会出现因为漏掉某一个div的定位而排版混乱的问题，对于新手来说，更困难的是无法精准判断定位的属性，通常要一直回头看自己做过的内容或者遇到新的问题就被卡的无法继续。

   float布局就显得灵活多了。但是一些特殊的地方搭配relative和absolute布局可以实现更好的效果。因为absolute是基于父级元素的定位，当父级元素是relative的时候，absolute的元素就会是基于它的定位了。比如你可以让一个按钮始终显示在一个元素的右下角。

   在布局排版中，什么地方用哪种方式通常跟一个人习惯性的整体框架布局有关，在我们对div块的布局架构掌握的更熟练之后，问题就会相应的变少很多了。