CSS绝对定位和浮动的分栏布局

CSS实现分栏布局第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning)，它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动(float)概念。

绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。

1、绝对定位

绝对定位的优势在于，我们可以丝毫不差地精确控制任何元素的位置—这里面没有什么需要猜测或者运气的成分。由于应用了绝对定位的元素被不留痕迹地从常规文档流中完全移除，所以它也不会为其他元素带来任何的影响。

那么让我们试一试用绝对定位如何实现下面的布局。

 如何用浮动实现这样的效果呢?其实很简单：

1、设定E的宽度，让E居中

2、设定A、B、C的宽度，将A、B、C分别向左浮动

3、给页脚设置clear属性

需要说明的是，浮动布局依然遵循常规文档流，所以与绝对定位相比，浮动定位时HTML源文件中元素声明的位置显得格外重要。 当然，解决这个问题的最简单的方法就是在源文件中交换左栏和右栏的声明次序，也有方法不用交换各栏的次序也可以实现同样的布局，但是，这就要用到一种比较晦涩的使用负边距值的方法。一般情况下，人们十有八九会选择交换源文件中左中两栏的声明次序。