为什么内部div试图清除其他div？

*新更新的JSFiddle http://jsfiddle.net/qKP2v/8/ *

我有一个非常简单的布局，分别有两个左右浮动的侧边栏。中间是一个#maincontentdiv，其中有一个#contentdiv。这样做的原因是，页面上的主要内容可以拉伸以填充浏览器分辨率的大小。

我遇到的问题是，当我想插入divs（#rectanglebox1, #rectanglebox2, #rectanglebox3）来清除div中的左浮点和右浮点时#content。但是#rectanglebox div试图清除侧边栏，这对我来说没有任何意义。#rectanglebox div位于#content未对其应用浮点数的区域内。那么为什么#rectanglebox div被推到侧边栏下方？

这是我的HTML：

<div id="wrapper">   
    <div id="maincontent">
        <div id="aside-left">
            <ul>
                <li>Link1</li>
                <li>Link2</li>
                <li>Link3</li>
            </ul>
        </div> 
        <div id="aside-right">
            <ul>
                <li>Link1</li>
                <li>Link2</li>
                <li>Link3</li>
            </ul>
        </div>       
        <div id="content">
            <div id="ataglance">
            <div id="rectanglebox1"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p></div>
                        <div id="rectanglebox2"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p></div>
                        <div id="rectanglebox3"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p></div>
        </div> 
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

这是我的CSS：

#wrapper {
    width:100%;
    margin: 0 auto;
    background-color: #FFF;
    min-height:200px;
    border: 1px solid #F0F;
}
#aside-left {
    height: 400px; /* guess */
    float:left;
    width:100px;
    top: 0;
    left: 0;
    border: 1px solid #9C0;
}
#maincontent {
    border: 1px solid #9C0;
    width:100%;
}
#maincontent #content{
    margin:0 130px;
    border: 1px solid red;
}
#aside-right {
    height: 400px; /* guess */
    float:right;
    width:100px;
    top: 0;
    right: 0;
    text-align: right;
    border: 1px solid #9C0;
}
#ataglance {
    border: 2px solid black;
}
#rectanglebox1 {
    float:left;
    margin-top:5px;
    border: 1px solid orange;
    width:200px;
}
#rectanglebox2 {
    float:left;
    margin-top:5px;
    border: 1px solid orange;
    width:250px;
}
#rectanglebox3 {
    float:left;
    margin-top:5px;
    border: 1px solid orange;
    width:300px;
}