一个奇怪的问题~关于Oprea下Div边框CSS的。。。

[langya001]

<!--顶部布局-->
<div id="heard">
<div id="logo"><img src="logo.gif" width="160" height="60" /></div>
<div id="nav">
<ul>
<li>网站首页</li>
<li>业界动态</li>
<li>网站运营</li>
<li>技术与产品</li>
<li>网页设计</li>
<li>网络编程</li>
</ul>
</div>
</div>

css:
* {margin:0;padding:0;}
ul {list-style-type:none;}
img {border:none;}
.clear{clear:both;height:0;overflow:hidden;}
body {font-size:12px;color:#000;}
#heard {width: 950px;margin:0 auto;border: 1px solid #00FF00;}
#logo {float:left;}
#nav {float:right;}
#nav li {float:left;margin:30px 10px 4px 0;}
==================华丽的分割线===========================

在IE下很正常的给Heard加载了边框border。可是在Opera下面就出现了奇怪的问题，边框挤成了一条粗线。就好像没有包括到logo和nav两个区域一样。但是我如果单独使用<div id="heard">xxxxxx之类</div>这样的代码。边框又会正常。
是不是BUG的一种？还是我的写法有问题呢？请大家帮忙。使用狗狗和百度都不好查。。。。

[ddcatlee]

google 闭合浮动元素

[langya001]

谢谢