Why is the parent div height zero when it has floated children

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: justi开发者_C百科fy; float: right; width: 90%;}
.lbar{text-align: justify; float: left; width: 10%;}

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>

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.

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).

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.

Ordinarily, floats aren't counted in the layout of their parents.

To prevent that, add overflow: hidden to the parent.

I'm not sure this is a right way but I solved it by adding display: inline-block; to the wrapper 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%;
}

Now, you can

#wrapper { display: flow-root; }

• Compatibility https://caniuse.com/flow-root
• History https://css-tricks.com/snippets/css/clear-fix/