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

Question

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 list items .

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

Answer 1

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.

Answer 2

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

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