What is the combination of table and float?

Question

What is the combination of table and float?

Navigation

#1 by (2 votes)
#2 by (0 votes)

3

Everyone who plays web programming has gone through this:

.children {
  float: left;
}

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

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

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

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

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

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

You may now notice that the .parent element has the same height as .children , even with float . Although I have been doing this for some time and it helps me a lot, I would like to know why this happens.

What is the effect of table on float ?

html css

asked by anonymous 02.02.2017 / 13:44

2 answers

0

The float was originally created for the images to float in the text.

And when you do this, the child element 'floats' in the parent, ie if the parent has no defined size, it gets zeroed by default.

Maybe this is more complete for you: link

02.02.2017 / 14:04

Angular2 - Inject Component into Body Connection problem with the database

score 2 · Accepted Answer

1) The effect of table on float is not any, but table has another display (table) as opposed to display: block of div. As table has always been used to have elements within the display of this has the content height

This causes the flow of the elements to be a little different, which affects the child elements in a different way.

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

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