让一个"<div>"保持其高度与浮动的孩子

Question

可能的重复：
如何调整div的高度以包裹其浮动的子

我想在带有一堆浮动<li>的<div>内部有一个<ul>。唯一的问题是包含的<div>折叠为0px高。如何使<div>保持其高度，就像它包含<li>一样？

HTML:

<div>
<ul>
<li>stuff</li>
<li>morestuff</li>
</ul>
</div>

CSS：

div {
background: rgb(90, 90, 90);
}
ul {
color: red;
}
li {
float: left;
clear: none;
margin-right: 10px;
}

如果使用花车是老式的，并且你知道更好的风格，请告诉我！

Answer 1

选项1(推荐)：给div样式overflow:hidden;，它将校正其高度。

选项2:或者在当前div 的末尾添加一个更清晰的div

<div>
<ul>
<li>stuff</li>
<li>morestuff</li>
</ul>
<div style="clear:both;"> </div>
</div>

jsFiddle演示

编辑：为了澄清，以上两个都有完整的跨浏览器支持，不需要黑客攻击或无效的CSS。

Answer 2

尝试Display:inline-block;

li {
display:inline-block;
margin-right: 10px;
}

演示

跨浏览器内联块

Answer 3

要解决您的确切问题：

div {
background: rgb(90, 90, 90);
overflow: auto;
}

也许是一种不那么"老式"的方法：

div {
background: rgb(90, 90, 90);
}
ul {
color: red;
}
li {
display: inline-block;
*vertical-align : auto;
*display: inline; // targets IE7 and such, same effect
margin-right: 10px;
}

您需要在li元素上调整您的边距，以匹配您的确切规格。使用float仍然很酷，但当display:inline块将解决您想要的大部分问题时，为什么要麻烦呢？？？

附言：有时IE黑客是可以的——我建议使用像Sass这样的预处理器和像Compass这样的库来帮助你管理它们。

关于这个问题的几篇文章：

• http://www.vanseodesign.com/css/inline-blocks/
• http://www.onderhond.com/blog/inline-block-vs-float

Answer 4

无论何时使用FLOAT属性，都不要忘记添加clear属性以及

你可以试试这个

<div>
<ul>
<li>stuff</li>
<li>morestuff</li>
<li style="clear:both;float:none"></li>    <!-- Added Clear, removed float -->       
</ul>
</div>​​​​​​​​​​​​​​​​