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

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

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

1、绝对定位

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

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

这是一个三栏的布局，并且是居中显示的。其中，A栏是主体内容栏，B栏和C栏都是侧边栏。首先，我们不可能直接用绝对定位将A、B、C三栏定位到居中的位置，因为每个人显示器的分辨率是不同的，在1024X768分辨率的显示器上定位的居中效果，在别的分辨率的显示器上看到的效果肯定不会是居中显示的，那么，该如何解决这个问题呢?

幸好，在绝对定位模型中有个极为有用的特性，那就是：若某个绝对定位元素的容器也被定位过，那么该元素指定的top和left值将不会基于文档的根元素html(也就是浏览器窗口的左上角)计算，而是会基于其容器的左上角计算这个偏移量。换句话说，也就是：被定位过的容器将扮演其中所有元素绝对定位起始点的角色。

所以，利用这个特性，我们给A、B、C栏的外部加上一个容器D，如下图：

然后，我们让容器D居中，并给它加上一个属性：position:relative，这样，再用绝对定位定位A、B、C的top和left值，A、B、C的位置就会基于容器D的左上角的位置来计算了，这样就可以实现我们期望的三栏居中的效果了。