Html CSS：浮动集上不包含高度的DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4009931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: DIV containing no height on float set
提问by RYN
assume we have this code:
假设我们有这个代码：
<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>
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?
当 rightDiv 和 leftDiv 的内容超过 200px 高度（最小高度）时，upperDiv 不会增长，因此其内容与下 div 重叠。如果我删除它增长的大内容的浮动属性，就会出现问题。但我不知道哪个 Div（rightDiv 或 leftDiv）超过 200px 高度。我怎样才能解决这个问题？
Thanks
谢谢
回答by jessegavin
Set #upperDivany of the following:
设置#upperDiv以下任何一项：
overflow: hidden;
width: 100%;
or
或者
float: left;
width: 100%;
or create a rule using CSS pseudo-elements (IE8+ compatible) like this
或者像这样使用 CSS 伪元素（IE8+ 兼容）创建规则
#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" ... >
P.S. If you require IE 6/7 compatibility, checkout this post.
PS 如果您需要 IE 6/7 兼容性，请查看此帖子。
回答by Quentin
This is intentional as floats are designed for things like images in paragraphs (where multiple paragraphs can wrap around the image).
这是有意为之，因为浮动是为段落中的图像设计的（其中多个段落可以环绕图像）。
Complex Spiral has a fuller explanationas to why and Ed Elliot describes a number of approaches to making containers expand around floats. I find the overflow: hiddenapproach works best in most situations.
Complex Spiral对原因进行了更全面的解释，Ed Elliot 描述了许多使容器围绕浮动展开的方法。我发现这种overflow: hidden方法在大多数情况下效果最好。
回答by PJunior
After
后
<div id='leftDiv' style='float:left;width:25%;'> content2 </div>
<div id='leftDiv' style='float:left;width:25%;'> content2 </div>
add
添加
<div style="clear:both"></div>
It will solve your problem.
它会解决你的问题。
回答by Ismail Farooq
There is a new property introduced recently display: flow-root;Which will fix this issue without any hacks and have almost all major support
最近引入了一个新属性，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>