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

*新更新的JSFiddle*

我有一个非常简单的布局，两个边栏分别浮动在左侧和右侧。中间是一个<代码>主要内容< /代码> div，里面有<代码>内容>代码> div。这样做的原因是，页面上的主要内容可以拉伸以填充浏览器分辨率的大小

我遇到的问题是，当我想插入div（

#rectanglebox1，#rectanglebox2，#rectanglebox3

）来清除我的

#content

div中的左右浮动。但是#rectangleboxdiv试图清除边栏，这对我来说没有任何意义。矩形框div位于

#content

区域内，该区域没有应用浮点。那么为什么#矩形盒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>

---

试试这个代码，它对我有用

<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>

---

这就是工作原理——这在规范中清楚地说明：“这个属性指示元素的框（ES）的哪些边可能不与先前的浮动框相邻。”清除“属性不考虑元素本身或其他块格式化上下文中的浮动。”@飘忽不定在这种情况下，如何解决它，使矩形框div仅在#content div内清除。它应该与#content div的顶部对齐。它没有与

#content

的顶部对齐，因为您有30px的边距-即使我删除了30px的边距，由于浮动/清除问题，整个div被压到两个边栏的高度以下。请参阅：@2dar谢谢您的回答。我已经更新了我的JSFIDLE，在这里进一步强调了这个问题。如果我使用您的解决方案并将矩形框浮动到左侧，它将破坏框的布局。它们应该坐在一起，而不是挨着坐。在这种情况下，您必须删除矩形框1,2,3中的浮动

<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>

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