Use overflow:auto; to expand the parent of floated elements

You know that problem where you have all floating elements in a parent div, and the parent doesn't expand to fit the size of its children? It's super irritating when you need that parent to provide background styling or to make other elements on the page fall in line.

The most bug-free fix I've found:

overflow: auto;

Apply this to the parent and remove any fixed height. BAM!! Nice expanding with decent respect for paddings and margins.

I'm surprised when I meet skilled webdevs who don't know this hack. They typically opt for clear: both;, which should work in theory, but I'm skeptical. I've seen clear: both; do funny things when there are many elements using it. The most puzzling one is where you get a huge gap between elements for no apparent reason.

But overflow: auto; on the parent seems to work every time.