为什么我的div的高度为零

问题描述

我在我的CSS中有以下。所有边距/ paddings / border已全局重置为0.

I have the following in my CSS. All margins/paddings/borders are globally reset to 0.

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

现在当我将HTML写为

Now when I write my HTML as

<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 结束...为什么这发生了吗？

the page renders correctly. However, when I inspect the elements, div#wrapper is shown as being 0px high. I would've expected it to expand till the end of div.content and div.lbar... Why does this happen?

同样，页面呈现正常。这种行为只会困扰我。

Again, the page renders fine. This behaviour just perplexes me.

推荐答案

浮动内容不会影响其容器的高度。该元素不包含不浮动的内容（因此没有任何内容停止容器的高度为0，就像它为空）。

Content that is floating does not influence the height of its container. The element contains no content that isn't floating (so nothing stops the height of the container being 0, as if it were empty).

设置 overflow：hidden 会避免这种情况：建立一个新的。有关其他技术，请参见，以及，了解为什么CSS是这样设计的。

Setting overflow: hidden on the container will avoid that by establishing a new block formatting context. See methods for containing floats for other techniques and containing floats for an explanation about why CSS was designed this way.

这篇关于为什么我的div的高度为零的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！