为什么我的div高度为零

Question

我的CSS中有以下内容.所有边距/填充/边框全局重置为0.

#wrapper{width: 75%; min-width: 800px;}
.content{text-align: justify; float: right; width: 90%;}
.lbar{text-align: justify; float: left; width: 10%;}

现在当我把我的HTML写成

<div id="wrapper">
    <div class="content">
        some text here
    </div>
    <div class="lbar">
        some text here
    </div>
</div>

页面呈现正确.但是,当我检查元素时,div#wrapper显示为0px高.我会一直期待它扩大,直到年底div.content和div.lbar...为什么会出现这种情况？

再一次,页面渲染得很好.这种行为让我感到困惑.

Answer 1

浮动的内容不会影响其容器的高度.该元素不包含任何不浮动的内容(因此没有任何内容阻止容器的高度为0,就像它是空的一样).

overflow: hidden通过建立新的块格式化上下文,可以避免在容器上进行设置.请参阅包含其他技术的浮点数并包含浮点数的方法,以解释为何以这种方式设计CSS.

Answer 2

通常情况下,floats不计入父母的布局.

为防止这种情况,请添加overflow: hidden到父级.

Answer 3

我不确定这是正确的方法，但我通过添加display: inline-block;到包装div中解决了。

#wrapper{
    display: inline-block;
    /*border: 1px black solid;*/
    width: 75%;
    min-width: 800px;
}

.content{
    text-align: justify; 
    float: right; 
    width: 90%;
}

.lbar{
    text-align: justify; 
    float: left; 
    width: 10%;
}