html - 容器应该为我计算高度吗？

我的网站上有一个div，其中包含三个div
代码是这样的：

<div id="container">
<div ></div>
<div id="div1"></div>
<div id="div1"></div></div>

在CSS中：

#container {
margin: 0 auto;
width: 950px;
opacity: .5;
filter: alpha(opacity = 50);
background: #fff;}

#div1 {
width: 100%;
height: 30px;
background: black;
float: left;}

#div2 {
margin:50px 0 50px 0;
width: 950px;
float: left;}

#div3 {
border: 1px solid black;
width: 437px;
height: 532px;
margin: 18px;
float: left;}

当我从#container中删除float:left时
然后使用firefox使其高度不会为零
但是当我重新添加它时，它将可以正常工作，但是我无法在浏览器窗口中居中显示该男孩。

我怎样才能解决这个问题？

最佳答案

使用一个清晰​​的div。这将使您的容器适应浮动元素的高度。另外，您的CSS中有一些错误。

“＃。”不是您声明ID的方式。

此外，HTML中的ID必须与CSS中的ID 100％匹配（区分大小写）。在HTML中，您有id="contianer"，但在CSS中，您有#container

.clear {
    clear:both;
    display:block;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:0!important
}

#container {
    margin: 0 auto;
    width: 950px;
    opacity: .5;
    filter: alpha(opacity = 50);
    background: #fff;
}
#div1 {
    width: 100%;
    height: 30px;
    background: black;
    float: left;
}

#div2 {
    margin:50px 0 50px 0;
    width: 950px;
    float: left;
}

#div3 {
    border: 1px solid black;
    width: 437px;
    height: 532px;
    margin: 18px;
    float: left;
}

<div id="container">
    <div ></div>
    <div id="div1"></div>
    <div id="div2"></div>
    <div class="clear"></div>
</div>

关于html - 容器应该为我计算高度吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8888906/