Floating is a concept borrowed from print media. An HTML element is floated when
it is pulled to the left or right and allows text to flow around it.
Consider the behavior of this floating technique, specifically
with the way that the image in this paragraph is still being
wrapped around by the text in the following paragraph.
This was the intended function of the CSS float property.
Because their behavior is horizontal, floats are a popular choice for horizontal alignment in layouts. A simple grid can be constructed using known widths (or percents) for a certain number of columns.
The diagram above demonstrates a simple 4-column grid. Twelve-column grids are also common, due to their flexibility in creating a wide variety of layouts.
In the original purpose of floats, it was good that the floated elements extended below the bottom border of their their container. But when you float every child of a container element, that container will collapse, potentially causing weird and unwanted layout behavior.
The CSS overflow property allows us to specify how an element handles content that extends beyond the borders of the element. Using it in this way forces the container element to actually contain its floated children.