用CSS的float属性创建三栏布局网页的方法
三栏布局是最常见的网页布局，主要页内容放在中间一栏，边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏，三栏占据整个页面的宽度，最后在页的底端放置页脚，页脚也占据整个页面宽度。本文介绍一种用CSS的float和clear属性来获得三栏布局的方法。
K C#D0u/Q
Cw)xNt Rs~r
绝大多数网页设计者都熟悉传统的网页设计技术，用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页。
,u Fi:{i[C qu
#eZk-k8v J!r
基本方法
9t _3Zdg]j$T^
ouj(K?
基本的布局包含五个div，即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的，并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定，因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充(padding)属性保证内容安排在一个整齐的栏中，甚至当它伸展到边栏(左栏或者右栏)的底端也是这样。
@"A7?9s-m2p4u
h#z5l P6jg K-Z
三栏布局的一个例子
4_%t.CR}H(W/^3[
L+PF#f.O"|/v }&@t
XHTML代码：[code]<body>
,`ABR+C |a&s.c
<div id="header">
n4{YRx}&] wT+]'d
<h1>Header</h1>
)PZ@x5o*y3UD(M o
</div>
s2u#Sz'\&] h.v
<div id="left">
N$b$Q0fPe
Port side text...
I!c9g~*m y
</div>
.p&C;lR ` tq
v
<div id="right">
)pmU;a] AL
Starboard side text...
ek`'Sd } XJ{
</div>
#X7i3l3]%tB
<div id="middle">
bU:aI+vofe}
Middle column text...
t D7E(x+T(|Z%]
</div>
&Y4N tu g8`*XFw f
<div id="footer">
F*]:k N n
Footer text...
$\$W8Li/w9moX
</div>
d3S:k3t
n_
</body>[/code]下面是CSS代码：[code]body {
-f#Qhh7f2O.q A1A5[;|-}
margin: 0px;
7U1T{ f F,z:E9i8|%f
padding: 0px;
*S B*}8s7h
}
"J'p Cm5c
u
d%D^
div#header {
}Y%h(u9P0b#D8w)Q a.}
clear: both;
w SQ d t5h4h
height: 50px;
E*E6F:{f/R
background-color: aqua;
"mU2k5C2|7]5{ I4k9o k
padding: 1px;
k1\v ]&Yb
}
)A pY BWK?%rs#a
div#left {
+LP'd} h B f!De
float: left;
7{9n+S!LD
`
N2~I}\y
width: 150px;
-Q
a+c_+RE
background-color: red;
s$\6r t5Tx(j1k
}
%\q h2~8F"_Pmt
div#right {
FWk4dT[ Nv
k
float: right;
5jt%cl0CN!j.iB$f
width: 150px;
gk[)B*Z&fN
background-color: green;
CMs+Y-E&r"RE+x#r!p
v
}
[,L7O'S"o3[uN
div#middle {
:VZ0Q+n Gs9a
padding: 0px 160px 5px 160px;
Vw#T5_3y!T
margin: 0px;
3f0M%E x @ a1?
background-color: silver;
s!e4Oi,g
}
"X"B [J$q#h!LI$J
div#footer {
+g$?,e$i
[
clear: both;
AgE!tUE(W R
background-color: yellow;
Ie3e)e6o \n
}[/code]