19

假设我们有这个代码：

<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 重叠。如果我删除它增长的大内容的浮动属性，就会出现问题。但我不知道哪个 Div（rightDiv 或 leftDiv）超过 200px 高度。我怎样才能解决这个问题？

谢谢

4

4 回答 4

45

设置#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 兼容性，请查看这篇文章。

于 2010-10-24T19:13:42.640 回答
8

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

Complex Spiral对原因有更全面的解释，Ed Elliot 描述了许多使容器围绕浮动展开的方法。我发现这种overflow: hidden方法在大多数情况下效果最好。

于 2010-10-24T19:14:51.407 回答
7

后

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

添加

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

它会解决你的问题。

于 2013-03-09T19:27:17.247 回答
2

最近引入了一个新属性display: flow-root;，它将在没有任何黑客攻击的情况下解决此问题，并且几乎得到所有主要支持

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

于 2019-09-20T11:44:27.387 回答