5

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?

braX
  • 11,506
  • 5
  • 20
  • 33
Daniel Fischer
  • 3,042
  • 1
  • 26
  • 49

2 Answers2

4

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

mpen
  • 272,448
  • 266
  • 850
  • 1,236
4

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

Salman A
  • 262,204
  • 82
  • 430
  • 521