Force ul to contain floated list items: use &nbsp or overflow: auto?

I don't wan't to use clearfix on all the parents above, because that would mess up my layout.

What is the best way and the correct way to do this?

I added a nbsp; after the last li and everything worked perfectly. No need for clearfix spamming. But is this the "correct" way to do it?

Edit: I've just seen List doesn't contain its floated l开发者_JS百科ist items.

So my new question is: what's better, &nbsp or adding overflow: auto?

Using overflow: auto or overflow: visible is obviously the better way but a concern may be that it may not render correctly in all browsers (*cough* Internet Explorer *cough*) with different rendering engines, etc.

In reality, if using   works, then use it.

A good article to read about floats is this one

EDIT: Don't use overflow:visible, that was just silly of me to suggest that.

You could us display:inline-block; to achieve the same thing.

http://jsfiddle.net/jasongennaro/w7U26/