为什么 heigh：auto 不适用于站点容器

Question

我一直在开发一个使用绝对高度值的网站，很好奇为什么height:auto不适合我，有人能澄清一下吗。

HTML结构

<div id="site-content">
<div id="menuconatiner"></div>
<div id="review-container"></div>
</div>

CSS

#site-content{
webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 0 auto;
width: 938px;
padding-bottom:20px;
background-color:white;}
#menuconatiner{
margin:5px;
float:left;
width:190px;}

Answer 1

使用以下CSS，您就不再需要高度属性了。

#reviews-content {
  display: table;
}

div不能自动扩展高度的原因是它包含浮动元素，但您没有使用clearfix。这可能是有用的链接：

• 什么是clearfix
• http://nicolasgallagher.com/micro-clearfix-hack/

我上面的解决方案现在可能会解决你的问题，但我建议将来使用clearfix。

Answer 2

正如我之前在OP中的评论中所提到的，问题是因为div的两个子元素都是浮动的。当元素浮动时，其父元素不再包含它，因为浮动已从流中删除。由于父元素不包含子元素，height: auto将不起作用（实际上，会起作用，但没有效果）。

选项1:删除"审阅容器"上的float: left，height: auto将如您所期望的那样工作，但正如JrnDel的评论中所提到的，这有一些含义。

选项2（最佳）：您可以添加一个clearfixdiv，如您自己在OP中的注释和JrnDel在该答案的注释中所述。