一尘不染

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

html

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

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


阅读 374

收藏
2020-05-10

共1个答案

一尘不染

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

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

2020-05-10