menu

Questions & Answers

Why do floats not respect their parent height in some instances and do in others?

This is a "why" question rather than a "how to" question.   I'm learning floats right now and one issue I keep encountering is that setting the float height as a % value will not be respected if the float is contained with clearfix. If the parent element is taken out of normal flow with display:table or position:absolute or whatever, then the float height % will be respected.  Why do float height % values not work with clearfix on the parent? Why does this issue not affect width % values? Why do display: table and position: absolute work while clearfix doesn't?

I've searched stackoverflow and all of the answers discuss "how to" rather than the "why".

Comments:
2023-01-21 00:10:15
share a code that demonstrate what you are saying. It make things easier to understand
2023-01-21 00:10:15
Just tested it out again and it seems like it may have to do with the parent container using % and the floating children using % as well. When I set the parent to vw/vh, the float fills up the height appropriately. So it's likely an issue with having %s for nested elements. I've used % for both parent & child before on non-floats and it's worked, but from my googling it seems to be best practice to not have % for both. I'll delete this question tomorrow since my question is based on some incorrect assumptions.
Answers(0) :