div里层与外层div的空隙问题！！！

这是母版页重的布局代码：
<div id="container">

　　<div id="Header">　
　　 <div id="banner">
<asp:Image ID="bannerImage" runat="server" ImageUrl="~/images/banner.gif" />
　　 </div>
　　　　<div id="menu">
网站导航
　　 </div>
　　</div>
　　
　　<div id="PageBody">
　　　　<div id="Sidebar" >
<asp:ContentPlaceHolder ID="SidebarContPlaceHolder" runat="server">
<p>侧边栏</p>
</asp:ContentPlaceHolder>　　　　
　　　　</div>
　　　　<div id="MainBody" >
<asp:ContentPlaceHolder ID="MainBodyContPlaceHolder" runat="server">
<p>主体内容</p>
</asp:ContentPlaceHolder>
　　　　</div>
　　</div>
　　
　　<br class="clearfloat" />
　　
　　<div id="Footer">
　　 <p style="text-align:center">Copyright ©2007 - 2008 Sky Online Exam. All rights reserved. 天空在线考试版权所有</p>
　　</div>
　　
</div>

这是css代码：
body
{
background-color:#F3F2F0;
margin:0;
padding:0;
}
#container
{
width:100%;
background-color:#F3F2F0;
margin:0;
border:0;
padding:0;
}
#Header
{
width:100%;
height:100px;
float:left;
margin:0;
border:0;
padding:0;
}
#Header #banner
{
width:100%;
height:85px;
margin:0;
border:0;
padding:0;
background:#FFFFFF;
}
#Header #menu
{
width:100%;
height:15px;
margin:0;
border:0;
padding:0;
background:#2596E4;
}
#PageBody
{
width:100%;
height:800px;
float:left;
margin:0;
border:0;
padding:0;
}
#PageBody #Sidebar
{
width:20%;
height:600px;
float:left;
margin:0;
border:0;
padding:0;
}
#PageBody #MainBody
{
width:78%;
height:100%;
float:right;
background:#FFFFFF;
margin:0;
border:0;
padding:0;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#Footer
{
width:100%;
height:60px;
float:left;
margin:0;
border:0;
padding:0;
background:#2596E4;

}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

/*页面底部*/
#Footer
{
width:100%;
height:60px;
float:left;
margin:0;
border:0;
padding:0;
background:#2596E4;

}

container与Header ，Header 与banner， banner与 menu 之间的上下都存在缝隙，好像空了一行，难看死了。怎么才能消除啊，

弄了好久没想明白为什么？？本人刚学CSS布局，希望大家帮帮我