很多企業網站制作布局都具有傳統型，基本層次包括：頂部：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，即這一層實際上是不可見的，僅作為網站制作中清除浮動之用。