基于 Float 的布局
基于 Float 的布局是一种非常容易使用的布局模式。
Float 属性指元素自动填充页面的空间， Float 可以向左浮动，也可以向右浮动。基于 Float 的布局（也称浮动布局）就是根据这个属性的特性来定义元素的布局。现在一般网站都会采用两列布局和三列布局。如下图
图 1 两列布局
图 2 三列布局
1 两列 Float 布局
<div id="swapdiv"> 布局头 </div>
<div id="leftNav">
……..
</div>
<div id="content">
……..
</div>
<div id="footer"> 页面尾部 </div>
这个设计，把整个页面分成四块，上面的布局头，下面的布局尾。主要的内容分成两列。 leftNav 为导航模块，放在页面的左边， content 为内容模块放在页面的右边，都采用 Float 的布局向左浮动。
下面是布局的 CSS 代码：
#swapdiv{
background:#00CCFF;
width:700px;
float:left;
}
#leftNav{
background:#00CCFF;
width:100px;
float:left;
}
#content{
background:#00CCFF;
width:600px;
float:left;
}
#footer{
background:#00CCFF;
width:700px;
float:left;
}
这种布局要注意的地方是内容注意不能过长。 Div 如果出现内容过长的情况下，在 IE 里面的表现是 Div 会自动拉长来适应页面的宽度，这样就会导致， Div 被浮动到下一行去。破坏了整个页面的布局。
上面的例子用像素作为 Div 的宽度，也我们也可以用百分比来设计 div 的宽度。
比如：
#swapdiv{
background:#00CCFF;
width:80%;
float:left;
}
#leftNav{
background:#00CCFF;
width:20%;
float:left;
}
#content{
background:#00CCFF;
width:80%;
float:left;
}
#footer{
background:#00CCFF;
width:80%;
float:left;
}
采用了像素作为宽度的单位，这个形式叫固定布局，有时称为冰布局。而用百分比作为布局宽度的形式叫流体布局。一般以像素用为单位的话，容易把握布局的位置，但是缩小浏览器后，则会出现水平滚动条。而且对于一个浏览器的空间利用不充分。使用流体布局的话，缩小浏览器时，页面会自动调整宽度，因此不会出现水平的滚动条，但是因为不同的机器显示器的分辨率不同，在不同的分辨率下，效果会不同，所以不容易把握布局。
有时候，字体的大小对于页面的布局也会形成一定的影响。因此还有一种布局，根据字号来调整元素的宽度
