超过主 Div 高度后，Div 搞砸了答案

【问题标题】：Div Messes Up After Exceeding Main Div Height超过主 Div 高度后，Div 搞砸了
【发布时间】：2020-06-10 15:32:07
【问题描述】：

所以我已经在这个网站上工作了一段时间，但我遇到了一个问题。这有点难以解释，所以首先我将展示它的屏幕截图：正如你所看到的，我可以继续堆叠我的边箱 div，但是一旦它越过主 div，由于某种原因，它会直接进入它上方的边箱 div 的右侧。
我尝试了不同的修复方法，但我还没有成功。

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="wrapper">
<!--Navigation-->
<div id="sidebox">
<div id="nav">
<ul>
<a href=""><li>HOME</li></a>
<a href=""><li>REGISTER</li></a>
<a href=""><li>DOWNLOADS</li></a>
<a href=""><li>CHAT BOX</li></a>
<a href=""><li>FORUM</li></a>
<a href=""><li>RANKINGS</li></a>
<a href=""><li>DONATE</li></a>
</ul>
</div>
</div>

<!--Banner-->
<div id="banner"></div>

<!--Main Content-->
<div id="main">

</div>
<div class="clear"></div>
<!--Server Information-->
<div id="sidebox">

</div>

<!--Partners-->
<div id="sidebox">

</div>

<div id="sidebox">

</div>

<div id="sidebox">

</div>

<div id="sidebox">

</div>

<div id="sidebox">

</div>

<div id="sidebox">

</div>

</div>
</body>
</html>

CSS：

* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url('../img/bg.png');
}

#wrapper {
    width: 960px;
    margin: 20px auto 0;
}

#banner {
    width:712px;
    height:175px;
    background-color: #333;
    border: 1px solid black;
    outline: 2px solid #444;
    margin-bottom:14px;
    float:right;
}

#sidebox {
    background-color: #333;
    border: 1px solid black;
    outline: 2px solid #444;
    width:230px;
    min-height:100px;
    float:left;
    margin-bottom:14px;
}

#nav {
    font-family: arial;
    background:red;
}

#nav ul {
    list-style-type: none;
}

#nav ul li {
    background: url('../img/navbg.jpg');
    padding-top:5px;
    padding-bottom: 5px;
    padding-left:5px;
    border-bottom: #262626 solid;
    border-top: #262626 solid;
    border-width: 1px;
}

#nav ul li:hover{
    background: url('../img/navbghov.jpg');
}

#nav ul a {
    color: #808080;
    font-size: 14px;
    text-decoration: none;
}

#main {
    background-color: #333;
    border: 1px solid black;
    outline: 2px solid #444;
    float:right;
    width:712px;
    min-height:600px;
}

.clear {

}

【问题讨论】：

好的。所以..？怎么了..？预期的行为是什么..？
请提供小提琴或网站链接

标签： html css css-float

【解决方案1】：

你好，你必须使用额外的包装检查这个 bin http://jsbin.com/sowivuvi/1/

还有两个 div #sidebar, #content

【讨论】：

我正准备提出同样的建议。添加额外的 div 将页面分开，就像我假设 OP 已经缩进一样。并排的框是因为main div 不再将侧框推过去。