div+css小疑问。

大家看一下这个left 和right 共同被一个#maincontainer div包裹。
代码如下。

   #left
        {
            background: #eee;
            width: 350px;
            height: 400px;
            float: left;
        }
        #right
        {
            background: #ccc;
            width: 150px;
            height: 400px;
            float: right;
        }
        #maincontainer
        {
            width: 500px;
            overflow: auto;
            
        }
        #foot
        {
            background: #eee;
            width: 500px;
            height: 100px;
        }

运行起来是没有问题的 “这里为什么出现？” 是没有的。

但是为什么设计页面中要空出这一块呢？ 我并没有设置#maincontainer的height。
也没有任何的边框。为什么出现那一块了呢？ 运行起来却没有问题。看着真别扭。
求大神帮解答。 CSS
[解决办法]
测试了IE7、8、9、10和chrome，在IE7中出现这种现象，正在找解决方式。
------解决方案--------------------

需要加上<div class="clear"></div>层来清除浮动~~

<div id="maincontainer">
<div id="left"></div>
<div id="right"></div>
<div class="clear"></div>
</div>
<div id="foot"></div>

.clear{clear:both;background: none;border: 0;display: block;float: none;font-size:0;margin:0;padding:0;overflow: hidden;visibility: hidden;width:0px;height:0px;line-height:0px;}

#left
        {
            background: #eee;
            width: 350px;
            height: 400px;
            float: left;
        }
        #right
        {
            background: #ccc;
            width: 150px;
            height: 400px;
            float: right;
        }
        #maincontainer
        {
            width: 500px;
            overflow: auto;
             
        }
        #foot
        {
            background: #eee;
            width: 500px;
            height: 100px;
        }