我遇到了一个问题，即只有某些部门在垂直方向上相互重叠。我的第二个灰色“pageBreak”安装在我的“subHeader”之上，而不管填充修复并试图保持在清除浮动的顶部。
我已经尝试过溢出、clearfix、老式的“clear: both;”，但我仍然遇到同样的问题。（我认为这是一个与浮点相关的问题。）我什至尝试（如您在代码中看到的）使用相对和绝对定位来让我的第二个“pageBreak”低于我的“subHeader”，因为它应该是，但没有定位值甚至移动第二个“pageBreak”。在这些引用的下方，我还有其他 div 潜入我的“subHeader”顶部。我宁愿不使用这些修复，因为出于显而易见的原因，我希望 CSS 尽可能动态。
我觉得代码很简洁，但我显然遗漏了一些相当明显的东西。任何帮助将不胜感激！
我已包含页面的 HTML 和 CSS 供您查看。
HTML：
<div class="container">
<div class="header">
<div style="float:left">
<img src="images/Logo.gif" alt="Company Logo" width="345px" height="117px">
</div>
<div style="float: right;">
<h2>Company slogan.™</h2>
</div>
<div style="clear: both;"></div>
</div>
<div class="pageBreak">
</div>
<div class="subHeader">
<div style="float: left; width: 400px; text-align: left;">
</div>
<div class="form" style="float: right; width: 300px;">
<form id='login' action='login.php' method='post' accept-charset='UTF-8'>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<div>
<label style="float: left;" for='username' >School Email</label>
<input style="float: right;" type='text' name='username' id='username' maxlength="50" /></br></br>
</div>
<div style="clear: both;">
<div>
<label style="float: left;" for='password' >Password</label>
<input style="float: right;" type='password' name='password' id='password' maxlength="50" />
</div>
<div style="clear: both;"></div>
<p style="font-size: 70%; text-align: right; line-height: 8px;"><a href="app-test/forgot-password.php">Forgot your password?</a></p>
<p style="font-size: 70%; text-align: right; line-height: 8px;"><a href="register.php">Want to register?</a></p>
<div>
<input type='submit' name='Submit' value='Log In' style="float: right;"/>
</div>
</form>
</div>
<div style="clear: both;"></div>
</div>
<div class="pageBreak" style="top: 400px;">
</div>
CSS：
.container {
width: 1000px;
margin-left: auto;
margin-right: auto;
border-radius: 15px;
background-color: white;
box-shadow: 10px 10px 40px #888;
}
.pageBreak {
margin-left: auto;
margin-right: auto;
width: 900px;
border-top: rgb(238,238,238) 3px solid;
}
.header {
padding-top: 30px;
padding-bottom: 30px;
padding-left: 50px;
padding-right: 50px;
}
.subHeader {
padding-top: 30px;
padding-bottom: 30px;
padding-left: 50px;
padding-right: 50px;
}