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

Question

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

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

我遇到的问题是，当我想插入 div(#rectanglebox1、#rectanglebox2、#rectanglebox3)时，它清除了我的 #content div 中的左右浮动。但是#rectanglebox div 试图清除对我来说没有任何意义的侧边栏。 #rectanglebox div 在 #content 区域内，没有应用 float 。那么，为什么将#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;
}

Answer 1

试试这个对我有用的代码!

<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="rectanglebox"><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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p></div>
             <div style="clear:both;"></div>
        </div>  
       <!-- <div style="clear:both;"></div>  no need for this -->
    </div>

</div>

并修改你的CSS:

#rectanglebox {
    margin-top:30px;
    border: 1px solid orange;  
    float:left;
}