0
我遇到了一个问题，只有某些部门彼此垂直重叠。我的第二个灰色的“pageBreak”在我的“subHeader”上面安装，不管填充修正和尝试停留在清除浮动顶部。为什么只有某些div互相重叠？
我试过overflow，clearfix，old-school“clear：both;”，而且我仍然有同样的问题。 （我认为这是一个与浮点相关的问题。）我甚至尝试过（如代码中所见），使用相对和绝对定位在我的“subHeader”下面获得我的第二个“pageBreak”，但它的位置值不会移动第二个“pageBreak”。我也有我的其他divs低于这些引用潜入我的“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;
}
你真的应该尽量避免内联风格... – rlemon