Firefox浏览器中div层重叠的解决方法

我们在用DIV+CSS布局网页的时候，往往在IE浏览器中显示是正常的，而在Firefox浏览器中显示确是重叠的，这是由于Firefox和IE浏览器对层的兼容性问题。下面给出我的解决方法，供大家参考，或有更好的方法请高手指教。

假设一个页面中有两个层，两个层的中间是文章内容，具体简单的代码如下所示：

<style type="text/css">
#top{
 float:left;
 margin:4px;
}
#foot{
 border:1px solid rgb(192, 192, 192);
 margin:0px auto;
}
.cl{
 clear:both; 
}
</style>
<div id="top">此处为第一个层的内容</div>
 此处为文章的具体内容。
 <div class="cl"></div>
<div id="foot">此处为第二个层的内容</div>

  以上代码中红色部分即为解决div层重叠的方法，即在两个层中间加一个空白层，清除该层两边的浮动，使得上面的层与下面的层不在同一行。