为什么浮动子代时父div高度为零

我的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...为什么会出现这种情况？

同样，页面呈现良好。这种行为使我感到困惑。

浮动内容不会影响其容器的高度。元素不包含不浮动的内容（因此，没有什么可以阻止容器的高度为0，就好像它是空的一样）。

overflow: hidden在容器上进行设置将通过建立新的块格式化上下文来避免这种情况。见包含花车方法的其他方法和含彩车有关为何CSS设计这样的解释。

通常，float不将s计入其父母的布局中。

为防止这种情况，请添加overflow: hidden到父项。

我不确定这是正确的方法，但是我通过添加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%;
}