overflow hidden with float left

Question

overflow hidden with float left

Navigation

#1 by (2 votes)

4

Hello, I am now learning to mess with css, and it falls into a situation where I can not find the answer anywhere, I will be very grateful if anyone 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 parent div and a child div, the child div is with float: left and that's where I did not understand, and the question is:

When I have a child div with float: left and the parent with overflow:hidden , the parent div is filled assuming height and width, and without overflow: hidden not.

Thank you.

css css3

asked by anonymous 24.01.2018 / 14:45

1 answer

Does Xamarin generate Java source code? Recover css with jQuery

score 2 · Answer 1

This has historical roots

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

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

In addition, if the element has any floating descendants whose bottom 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 within absolutely positioned descendants or other floats are not.

The 2008 version still did not say anything about it. So before 2011 this was not even an "official" behavior.

But before that, that was how the browsers behaved. Putting together a little of my memory with a document that is disappearing from the web ( pt-br ), you can say that this comes from Internet Explorer, certainly from before 2005, probably even in the late 1990s. There was, and might still exist in Microsoft's codebase, an internal IE property that determined a bundle of visual behaviors of elements at the time of rendering. It was called hasLayout .

There was never much documentation from Microsoft about this, as it was a property of internal browser use. Today, there is still some traces in IE documentation when dealing with legacy modes. It was up to a group of "web standards evangelists" to informally test and document how CSS code could assign hasLayout to elements in IE, at document that I already mentioned above, and whose first version is from 2005. For years before that, there was simply no documentation on the subject, and float was not even much used (had many implementation bugs in IE for many years).