简单的网页布局

1.自动居中，加一个包裹层，设置CSS

<div id="wrap">
...
</div>

#wrap{width: xxx px;margin:0 auto;}

2.使用浮动式实现两列布局

<div id="left">
...
</div>
<div id="right">
...
</div>

#left{width:xxx px;float:left}
#right{float:left}

3.清除浮动影响

(1). 在该块级元素添加如下CSS样式

{clear:auto;}

(2).该块级元素的父级元素添加如下CSS样式

{overflow:hidden;}

4.使用绝对定位实现两列布局

<div id="main-body">
    <div id="left">
    ...
    </div>
    <div id="right">
    ...
    </div>
</div>

#main-body{width:100%;position:relative;}
#left{width: xxx px;}
#right{position:absolute;top:0 px;left:xxx px;}

5.使用浮动实现三列布局

<div id="left">
...
</div>
<div id="mid">
...
</div>
<div id="right">
...
</div>

#left{width:xxx px;float:left;}
#left{width:xxx px;float:left;}
#right{width:auto}