The modern way to clear floated content?

Question

What's the modern way to clear floated content these days?

There's the "recent" modern way of adding a ".clearfix" on the parent element to clear the contained floats and that would work great. In fact, this is my favorite method and still use this on any site I touch. It makes every browser render correctly.

However, I know it's sort of a hack, and I googled recently to find that a lot of front-end developers feel the same way and want a more true solution. The results I've found have not been to great. There are some solutions but they only work on IE7+ and sometimes on Opera things are a bit buggy.

Anyway, I'm just wondering what's the best way to clear floats these days?

Answer 1

Just add overflow:auto to the containing div. (explanation)

Answer 2

a) Here is a roundup of the clearing methods along with pros and cons: Methods for Containing Floats

b) This article titled "How To Clear Floats Without Structural Markup" contains a heading: 21st Century Style