网站的CSS布局有两种方式：浮动定位。浮动的初衷是将插入文章的图片向左或向右浮动，使图片下方的文字自动环绕，使图片左侧或右侧不会出现大的空白。定位的优点是我们可以精确地控制任何元素的位置-没有什么可以猜测或运气。由于应用了定位的元素完全从常规文档流中移除，没有任何痕迹，因此不会对其他元素造成任何影响。具体操作如下：

1、 浮动

虽然浮动语法很简单，但掌握起来却不那么容易。让我们在下一个方面说明如何使用浮动来进行布局。类似地，我们需要实现一个带有页脚的三列布局。

设置a、B和C的宽度，并分别向左浮动a、B和C

需要注意的是，浮动布局仍然遵循正常的文档流，因此与定位相比，元素声明在HTML源文件中的位置尤为重要。当然，解决这个问题最简单的方法就是在源文件中交换左列和右列的声明顺序。还有一些方法可以实现相同的布局，而不必交换每列的顺序。但是，这需要一种使用负边距值的模糊方法。一般来说，人们十有八九会选择exchange源文件中左边和中间列的声明顺序。

2、 定位

这是一个三列布局，居中。其中，A栏为主要内容栏，B栏和C栏为侧边栏。首先，我们不能直接用定位法将a、B、C列定位在中间，因为每个人的显示分辨率是不同的。在1024x768分辨率显示器上定位的居中效果不会在另一分辨率显示器上居中。那么，如何解决这个问题呢？

幸运的是，定位模型中有一个非常有用的特性，即如果定位元素的容器也已定位，则元素指定的顶部和左侧值将不会基于文档根元素的HTML进行计算，而是基于文档的左上角进行计算集装箱。换句话说，定位容器将作为其中所有元素的起点。因此，使用这个特性，我们将容器d添加到a、B和C列的外部，

然后，我们将容器D置于中心并向其添加一个属性位置：相对位置这样，利用定位来定位a、B、C的上、左值，根据容器D左上角的位置来计算a、B、C的位置，我们可以达到理想的效果，居中三列。

然而，我们常用的布局并不是那么简单。除了三列之外，网站还需要一个页眉和一个页脚。此时，定位布局是不可行的，因为定位元素将从文档流中完全移除。此时，页脚将位于页眉旁边，并显示在页眉下方。如果必须使用定位，则必须事先知道三列中每列的高度，然后根据***的列来定位页脚。如果任何一列中的文本长度都无法确定，我们只能放弃定位的想法，除了使用JavaScript之外，进入浮动布局的怀抱。