CSS：DIV在浮点集上不包含高度

Question

假设我们有以下代码：

<div id='upperDiv' style='min-height:200px;border: 1px solid #000000;'>
     <div id='rightDiv' style='float:right;width:75%;'>
       content1
     </div>  
     <div id='leftDiv' style='float:left;width:25%;'>
       content2
     </div>
</div>
<div id='lowerDiv' style='height:50px;border: 1px solid #000000;margin-top:5px;'>
   content3
</div>

当rightDiv和leftDiv的内容超过200px高度（最小高度）时，upperDiv不会增长，因此其内容与下div重叠。如果删除大内容的float属性，它将增长，并且会出现问题。但是我不知道哪个Div（rightDiv或leftDiv）通过200px的高度。我怎样才能解决这个问题？

谢谢

Answer 1

设置#upperDiv以下任何一项：

overflow: hidden;
width: 100%;

要么

float: left;
width: 100%;

或使用CSS伪元素（兼容IE8 +）创建规则

#upperDiv:after {
  content: "";
  display: table;
  clear: both;
}

最佳解决方案如下
创建可重用的类规则。

.group:after {
  content: "";
  display: table;
  clear: both;
}

现在，您可以将其应用于需要此功能的任何设备。例如…

<div id='upperDiv' class="group" ... >

。