overflow Hidden with float left

Question

Hello I’m learning now how to deal with css, and fall into a situation that I found nowhere the answer, I will be very grateful if someone can help me.

.pai-com-overflow{
  border: 1px solid red;
  overflow:hidden;
  margin-bottom: 20px;
}

.pai-sem-overflow {
   border: 1px solid red;
}

.filho {
   float: left;
}

<div class="pai-com-overflow">
  <div class="filho">
    CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO 
  </div>
</div>

<div class="pai-sem-overflow">
  <div class="filho">
    CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO CONTEUDO 
  </div>
</div>

In this example I have a div father and a div son, the div son is with float: left and that’s where I didn’t understand, and the question is :

For when I have a div son with float: left and father with overflow:hidden, the father div gets filled assuming height and width and without overflow: hidden nay.

Thank you.

Answer 1

This has historical roots

If you’re looking for an explanation of the logic behind this behavior, forget it - and that goes for many other CSS questions.

The oldest reference of this I found in the CSS specification is 2011, in one of the many revisions of CSS 2.1. There it is just said that this is how browsers should behave:

In addition, if the element has any floating Descendants Whose bottom margin edge is Below the element’s bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are Taken into Account, e.g., floats Inside Absolutely positioned Descendants or other floats are not.

To 2008 version didn’t talk about it yet. So before 2011 this wasn’t even an "official".

But long before that was how browsers behaved. Joining some of my memory with a document that is disappearing from the web (en), It can be said that this comes from Internet Explorer, certainly before 2005, probably even in the late 1990s. There was, and might still exist in the Microsoft code base, an internal property of IE that determined a package of visual behaviors of the elements at the time of rendering. It was called hasLayout.

There has never been much documentation from Microsoft about this, as it was an internal browser usage property. Still today there is some traces of it in the IE documentation, in dealing with the legacy ways. It was up to a group of "web standards evangelists" to informally test and document how the CSS code could be assigned hasLayout elements in the Ifs, in document that already Linkei above, and whose first version is from 2005. For years before that, there was simply no documentation on the subject, and float was also not widely used (it had many implementation bugs in IE for many years).