使用CSS布局非常简单，如果你习惯使用tables布局，可能开始时有点困难，但其实很容易，事实上只是观念的不同。

你需要把网页的每个部分看成独立的块，你可以绝对或相对定位块。

Positioning 定位

positon属性可以指定元素为absolute,relative,static或是fixed。

static是元素默认属性，按HTML出现的先后顺序。

relative比较像static，但元素可以使用top,right,bottom和left设定初始属性。

absolute把元素从HTML里面拉出，一切由它自己决定，在这里，绝对定位元素可以使用top,right,bottom,left定位在任何地方。

fixed行为像absolute，但它绝对定位的元素参照浏览器窗口与网页没有关系。所以，理论上，fixed元素可以固定在屏幕上当页面滚动时。为什么说是理论上的？因为IE7以下的浏览器不支持。

使用绝对定位布局

可以使用绝对定位创建传统的两列布局，如下：

divullia href="this.html"/a/li

a href="that.html"/a/lilia href="theOther.html"The Other

divh1Ra ra banjo banjo

Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.

(Ra ra banjo banjo)

上面加上CSS：

#navigation {

position: absolute;

top: 0;

left: 0;

width: 10em;

}

#content {

margin-left: 10em;

}

上面导航条设定在左边，宽度是10em。因为导航条是绝对定位，所以流动的页面上什么也不动，需要设定内容的左边margin等于导航条的宽度。

真是简单。你没有限制这两列的距离，使用聪明的布局，你可以随心所欲安排许多块。如果你想添加第三列，比如：

#navigation {

position: absolute;

top: 0;

left: 0;

width: 10em;

}

#navigation2 {

position: absolute;

top: 0;

right: 0;

width: 10em;

}

#content {

margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */

}

最后阶段去绝对定位元素，因为它们独立存在，无法正确了解它们哪里结束。如果你使用上面的例子，所有的页面有小的导航条和大的内容区域到可以，但是，特别是宽度和大小使用相对值，你必须经常放弃定位的希望，比如位于元素最下面的底部布局。如果你想定位底部，采用浮动模式比绝对定位好。

Floating 浮动

浮动元素可以在一条线上移动。

浮动一般使用在定位页面里的小型元素，但也可使用在大块里，比如导航。

上面的HTML例子使用下面CSS：

#navigation {

float: left;

width: 10em;

}

#navigation2 {

float: right;

width: 10em;

}

#content {

margin: 0 10em;

}

如果你不希望接下来的元素包围浮动对象，可以使用clear属性。clear:left清除浮动在左边的元素，clear:right清除浮动在右边的元素，clear:both清除所有。如果你想添加底部footer，可以像下面：

#footer {

clear: both;

}

footer将在所有列下面，不管它们的长度如何。

这篇介绍了定位和浮动的基本情况，强调页面的大块，但记住，上面方法可以运用到块里面的任何元素。通过组合使用position,floating,margins,padding和border，你可以表现出任何网页设计，table布局能做的CSS没有什么不能做。

使用表格布局的理由就是考虑古老的浏览器。CSS的优势在于拥有很高的可用性，而且体积上只有使用table布局的部分大小。