Html Div 不根据内容调整高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25110971/
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
Div not Adjusting Height Based on Contents
提问by Tyharo
I can't seem to figure out why my info-container div won't adjust its height based upon its contents. I do have a floating div within it and I think it might be causing the problem, but I'm not completely sure. I have a link to jsfiddle where you can see the CSS and some HTML if it helps. Any help is greatly appreciated!
我似乎无法弄清楚为什么我的信息容器 div 不会根据其内容调整其高度。我确实在其中有一个浮动 div，我认为它可能会导致问题，但我不完全确定。我有一个指向 jsfiddle 的链接，如果有帮助，您可以在其中查看 CSS 和一些 HTML。任何帮助是极大的赞赏！
Here is the CSS for the info-container ID holding the float and all other information
这是保存浮动和所有其他信息的信息容器 ID 的 CSS
#info-container{
position:relative;
padding-bottom:20px;
padding-top:20px;
padding-left:10px;
padding-right:10px;
margin-left:auto;
margin-right:auto;
background:#6F90A2;
min-width:1000px;
max-width:1000px;
clear: both;
height:auto;
}
回答by j08691
Add overflow:auto;to #info-container.
添加overflow:auto;到#info-container.
Floating the child element removes it from the document flow and the parent will collapse. By adding the overflow rule, the desired behavior is restored.
浮动子元素会将其从文档流中删除，父元素将折叠。通过添加溢出规则，可以恢复所需的行为。
回答by aniskhan001
#info-container{
overflow: auto;
}
回答by Alexander O'Mara
You need what is known as the CSS clearfix. This can be achieved with the following CSS.
您需要所谓的 CSS clearfix。这可以通过以下 CSS 实现。
#info-container:after {
clear: both;
content: "";
display: table;
}
This will create a pseudo element that will force the wrapper to wrap the floated children.
这将创建一个伪元素，强制包装器包装浮动的子元素。
This is arguably a cleaner solution that adding an overflowproperty, as the overflow property has other uses and depending on the case can cause problems with hidden overflow or internal scrollbars.
这可以说是添加overflow属性的更简洁的解决方案，因为溢出属性还有其他用途，并且根据情况可能会导致隐藏溢出或内部滚动条出现问题。
回答by Roko C. Buljan
Create a CSS class:
创建一个 CSS 类：
.clear:before,
.clear:after {
content:" ";
display:table;
}
.clear:after {
clear:both;
}
and simply apply it to your
并简单地将它应用到您的
<div id="info-container" class="clear">
or to any other element that contains Floatedelements which you're having problems with.
或包含您遇到问题的Floated元素的任何其他元素。
如果你想做得更简单，请使用
overflow : auto;
for any parent element containing floated children, if you're able to do sodue to the fact that will become an overflowelement
对于包含浮动子元素的任何父元素，如果由于将成为溢出元素而能够这样做
