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" ... >

PS如果您需要IE 6/7兼容性,请查看此帖子.

Answer 2

这是故意的,因为浮点数被设计用于段落中的图像(其中多个段落可以环绕图像).

Complex Spiral 对于为什么和Ed Elliot描述了许多使容器在浮子周围扩展的方法有更全面的解释.我发现这种方法在大多数情况下效果最好.overflow: hidden

Answer 3

后

 <div id='leftDiv' style='float:left;width:25%;'>
   content2
 </div>

加

     <div style="clear:both"></div>

它会解决你的问题.