发布时间：02-02 | 来源：酷遨网络
很多企业网站制作布局都具有传统型，基本层次包括：顶部：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，即这一层实际上是不可见的，仅作为网站制作中清除浮动之用。