What is the combination of table and float?

Question

Everyone who deals with web programming has been through this:

.children {
  float: left;
}

<div class="parent">
  <div class="children">
    Teste
  </div>
</div>

If you use the Inspect Element above you may notice that in the element .parent the height is 0px.

I have never read why this happens. This is part of the question, if someone knows and can explain, it would be good.

But what do I do to solve this ? Something I learned a while ago, not to have to use the clear: both:

.parent {
  display: table;
}
.children {
  float: left;
}

<div class="parent">
  <div class="children">
    Teste
  </div>
</div>

You can now notice that the element .parent is the same height as the .children, even with float. Although I’ve been doing this for a while and it helps me a lot, I’d like to know why it happens.

1. What is the effect of table in float ?

2. And when you don’t do that because the parent element gets height: 0px ?

Answer 1

1) The effect of table in float it’s not any, only that table has another display (table) unlike display: block of the div. How table has always been used to have elements inside the display of this has the height of content

This makes the flow of the elements a little different, which in turn affects the child elements in a different way.

2) A div whose children are only elements with float loses height because the alternative is too ugly: thinks, if the element only contains floats and the parent element had height would happen a large line (of a color qq) with a huge height with elements at each end of the site (Esq. and law)

So, without height, no one realizes that there is an element (this, if you use a div).

Answer 2

The float originally created for images to float in texts.

And when you do that, the child element 'floats' in the parent, that is if the parent has no set size it gets zeroed which is by default.

Maybe this is more complete for you: https://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell