很多企业 网站制作布局都具有传统型，基本层次包括：顶部：header、主要区域：main、左侧：sidebar、右侧：containe和底部：footer。本文主要讲诉用DIV+CSS如何实现这样的布局。

在制作之前我们先注意下浏览器的兼容问题，在IE中，正常的代码就可以完全显示，但在FF中，footer层就会消失。这是因为FF不知道浮动以后发生的事情，不清楚main的高度为几何，我们看不到它的存在。我们应该在sidebar、containe结束的地方清除浮动，让FF知道如何处理footer层，而不是直接放到上面，在视觉上消失。

HTML代码如下：

<div id="footer"></div>

<div id="header"></div>

<div id="main">

<div id="containe"></div>

<div id="sidebar"></div>

<div id="clearfloat"></div>

</div>

<div id="footer"></div>

CSS代码如下：

*{margin:0;padding:0;}    //整体布局声明，边距与填充均为零。

#header {width:776px;height:100px;margin:0 auto;background:#06f;}  //对header的定义：宽度为776px；高度为100px；上下边距为零，左右边距为自动，实现了水平居中对齐；背景色为蓝色#06f。

#main {width:776px;margin:0 auto;}    //对main的定义：宽度为776px；上下边距为零，左右边距为自动，实现了水平居中对齐；无背景色等其它设置。

#main #sidebar {width:200px;float:left;background:#f93;}    //对main的子层sidebar进行定义：宽度为200px；向左浮动；背景色为桔红色#f93。

#main #containe {width:576px;float:right;background:#dceafc;}   //对main的子层containe进行定义：宽度为576px(776-200)；向右浮动；背景色为很淡的蓝色#dceafc。

#footer {width:776px;height:60px;margin:0 auto;background:#666;}   //对footer的定义：宽度与上面的一样为776px；高度为60px；上下边距为零，左右边距为自动，实现了水平居中对齐；背景色为深灰色#666。

#clearfloat {clear:both;height:1px;overflow:hidden;margin-top:-1px;}  //clear:both;是指不允许左右有浮动对象；高度为1px；溢出为隐藏；顶边距为-1px，即这一层实际上是不可见的，仅作为网站制作中清除浮动之用。