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

Posted 2023-03-06

【中文标题】CSS：DIV在浮动集上不包含高度

【英文标题】：CSS: DIV containing no height on float set

【发布时间】：2011-04-29 22:10:56

【问题描述】：

假设我们有这个代码：

<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 高度。 我该如何解决这个问题？

谢谢

【参考方案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" ... >

附：如果您需要 IE 6/7 兼容性，请查看this post。

【参考方案2】：

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

Complex Spiral 有一个 fuller explanation 说明原因，Ed Elliot 描述了许多 approaches to making containers expand around floats。我发现overflow: hidden 方法在大多数情况下效果最好。

【讨论】：

这是一个很好的解释性答案。良好的链接。 +1

在阅读 Complex Spiral article 之前，我从未完全理解 clearfix hacks。必读！

【参考方案3】：

之后

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

添加

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

它会解决你的问题。

【参考方案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>