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

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

回答:

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

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

以上是 为什么父div高度浮动时子代的高度为零 的全部内容, 来源链接: utcz.com/qa/401451.html

回到顶部