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将通过建立新的block formatting context来避免这种情况。有关其他技巧的信息，请参见methods for containing floats;有关为何以这种方式设计CSS的说明，请参阅containing floats。

Answer 2

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

为防止这种情况，请将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%;
}

Answer 4

现在，您可以

#wrapper { display: flow-root; }

兼容性https://caniuse.com/flow-root
历史https://css-tricks.com/snippets/css/clear-fix/

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

4 个答案: