为什么一个浮动 div 中的尾随 <br> 标记能够下推我页面上的另一个浮动 div？

Question

当前页面只有两个并排放置在包含部分中的 div。我在 qtr_calc 上有两个尾随 <br> 标签，它们向下推 sem_calc。 qtr_calc 不应该在不影响 sem_calc 的情况下在底部有尽可能多的换行符吗？如果没有，是否有解决方法？

有人遇到了类似的问题here，但没有解释为什么会发生这种情况，帮助他们的答案对我没有帮助。

div' html:

<section id="content">
  <div id="qtr_calc">
     <label for="qtr_cred_hrs">Quarter class credit hours:</label><br />
     <input type="text" id="qtr_cred_hours" /><br /><br />
     <label for="qtr_grade">Letter grade:</label><br />
     <input type="text" id="qtr_grade" /></div>
  </div>
  <div id="sem_calc">
     <label for="sem_cred_hrs">Semester class credit hours:</label><br />
     <input type="text" id="sem_cred_hours" /><br /><br />
     <label for="sem_grade">Letter grade:</label><br />
     <input type="text" id="sem_grade" /></div>
  </div>
</section>

div' CSS:

#qtr_calc { 
   float: left;
   margin: 3em;
   padding: 2em;
   border: 1px double #F2F2F2; /* inside border */
   outline: 1px solid #BFBFBF; /* outside border */
}

#sem_calc {
   float: left;
   top: 0;
   margin: 3em;
   padding: 2em;
   border: 1px double #F2F2F2; /* inside border */
   outline: 1px solid #BFBFBF; /* outside border */
}

And here's a pastebin with the rest of the page, in case it helps somehow.

Answer 1

这里有一个额外的结束 div 标签：

<input type="text" id="qtr_grade" /></div>

Demo

Answer 2

删除多余的结尾 Div 和 top:0；并尝试给他们宽度，比如 20%。那应该可以解决你的问题。

为什么一个浮动 div 中的尾随 <br> 标记能够下推我页面上的另一个浮动 div？

Why is a trailing <br> tag in one floating div able to push down another floating div on my page?

css

html

css-float