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".
share a code that demonstrate what you are saying. It make things easier to understand
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.