为什么浮动子代时父div高度为零 [英] Why is the parent div height zero when it has floated children

问题描述

我的CSS中包含以下内容.所有边距/边距/边界都全局重置为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高度为零的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！