html – What is the combination of table and float?

Question:

Everyone who works with web programming has gone through this:

.children {
  float: left;
}
<div class="parent">
  <div class="children">
    Teste
  </div>
</div>

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

I've never read why this happens. That's part of the question, if someone knows and can explain, it would be good.

But what do I do to resolve this? Something I learned a while ago, so I don't have to use clear: both :

.parent {
  display: table;
}
.children {
  float: left;
}
<div class="parent">
  <div class="children">
    Teste
  </div>
</div>

You can now notice that the .parent element 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 would like to know why this happens.

  1. What is the effect of table in float ?

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

Answer:

1) The effect of table in float is none, but table has another display (table) as opposed to display: block of the div. As table always been used to have elements inside the display it has the height of the content

This makes the flow of the elements a little different, which sometimes affects the child elements differently.

2) A div whose children are only float elements loses height because the alternative is too ugly : think, if the element only contains floats and the parent element had height, there would be a big line (of a qq color) with a huge height with elements at each end of the site (left and right)

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

Scroll to Top