CSS：在浮动集上不包含高度的DIV [英] CSS: DIV containing no height on float set

问题描述

假设我们有这个代码：

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

When content of rightDiv and leftDiv passes the 200px height (the min height) upperDiv doesn't grow, so its content overlaps the lower div. If I remove the float attribute of the large content it grows and there will be problem. But I don't know which Div (rightDiv or leftDiv) passes 200px height. How can I fix this?

感谢

推荐答案

>设置 #upperDiv 以下任一项：

overflow: hidden;
width: 100%;

或

float: left;
width: 100%;

或使用CSS伪元素（IE8 + compatible）创建规则，如下所示

or create a rule using CSS pseudo-elements (IE8+ compatible) like this

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

最佳解决方案

创建一个可重用的类规则，如下所示。

Best solution
Creating a reusable class rule like the following.

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

现在，您可以将它应用于需要相同功能的任何东西。例如...

Now you can apply it to anything that needs this same functionality. For example...

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

如果您需要IE 6/7兼容性，请此帖。

P.S. If you require IE 6/7 compatibility, checkout this post.

这篇关于CSS：在浮动集上不包含高度的DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！