While floats do provide quite a bit of fire power, they do come with a few of their own problems. The most popular problem involves a parent element that contains numerous floated elements. Content on the page will respect the size and placement of the floated children element, but these floated elements no longer impact the outer edges of the parent container. In this event the parent element loses context of exactly what it contains and collapses, thus giving the parent element a height of 0 and ignoring various other properties. A lot of times this may go unnoticed, specifically when the parent element doesn’t have any styles tied to it and the nested elements look to have aligned correctly.
Should the nested elements not line up correctly, styling errors may appear. Taking a look at the demo below, the .box-set division should have a light gray background, however the background is not seen as all of the elements nested within it are floated. Upon inspecting the .box-set division you will see it has a height of 0.
reference:https://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/