Floating elements pulls them out of the natural flow of the document, so it has the effect of making them “invisible” to their containers, thus causing them to collapse (like you’re seeing).
You can often use overflow: hidden; on the floated element(s) container to uncollapse it, but this might give undesirable results. E.g. if you hide the overflow of a nav bar to clear floated menu buttons, and those buttons have long dropdows attached to them, you can end up hiding the dropdowns too.
Another way to clear floats is with the clearfix method https://css-tricks.com/snippets/css/clear-fix/ (this wouldn’t hide the dropdowns)
But for more info try Googling “clearing floats css” and that will bring up more detailed explanations and examples (it’s a bit difficult for me at the mo as I’m on mobile).
