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

P.S。如果您需要IE 6/7兼容性，请结帐this post。

Answer 2

这是故意的，因为浮点数是为段落中的图像（多个段落可以环绕图像）而设计的。

复杂螺旋有fuller explanation为什么，Ed Elliot描述了一些approaches to making containers expand around floats。我发现overflow: hidden方法在大多数情况下效果最好。

Answer 3

在

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

添加

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

它将解决您的问题。

Answer 4

最近引入了一个新属性display: flow-root;，该属性将解决此问题而不会受到任何黑客攻击，并且几乎all major support

<div id='upperDiv' style='border: 1px solid #000000; display: flow-root;'>
     <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>

CSS：DIV在浮点集上没有高度

4 个答案: