How this code works [It's About Float Container]?

Recently while doing practical from StunningCSS3 Book, I faced this problem. First please Look at the code.

HTML:

<h3>Download:</h3>
    <ul>
        <li><a href="video/cary.mov">Cary riding a horse for the first time (MOV)</a></li>
        <li><a href="photos/lymepark.jpg">Zoe at Lyme Park</a></li>
        <li><a href="photos/dovedale.jpg">Cary and Zoe in Dovedale Valley</a></li>
        <li><a href="photos/sudburyhall.jpg">Zoe at Sudbury Hall</a></li>
    </ul>

CSS:

h3 {
   float: left;
   font-size: .8em;
   font-weight: normal;
   text-transform: uppercase;
}
 
ul {
   overflow: hidden; /*My Problem lies Here - Probably*/
   list-style: none;
}
 
li {
   float: left;
}

As you can see the element h3 is Floated left and all li Elements are also floated left. If we reduce the browser width the last li should be drop below h3. But in this case it is just below first li element.
I have attached output of above code.

I think there should magic of overflow:hidden in Ul. That overflow:hidden is clearfix or Something else that cause last li to drop just below first li ?

P.S: In original code I have used reset.css that gives 0 margin and padding to h3. Means that is not height of h3 which cause this effect.