List doesn't contain its floated list items

In the following code the ul is not shown. It's l开发者_StackOverflow中文版ike the li's need to be cleared, but I can't do that because I have other floats that it would mess with. Why doesn't the ul enclose its li's and is there a way to make it work? (I've only tested it in Firefox)

<style>
   li { float: left; }
   ul { background: #F00; }
</style>

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
</ul>

It's really easy:

• Add overflow: auto to the ul rule.

Live Demo

I'm not sure what you mean by "but I can't do that because I have other floats that it would mess with" - you'll need to show more of your code and describe what you want a bit better.

I can't link to a demo at the moment, but I think adding overflow: hidden; to the ul's CSS should work.