Question

I have a div with an unordered list that has a border around it. When I set the text inside it to float left it collapses the div and the border squashes upward.

Not sure why this is happening.

http://jsfiddle.net/chapster11/jSvdW/

Updated: I just want to first say thanks to everyone for their response and it helped me understand this question in a better light. I found a link that I think might benefit someone who runs into this issue, which explains both the overflow:hidden and clear float technique, in a very simplified manner. It also covers floats in detail.
http://css-tricks.com/795-all-about-floats/

Answer 1

Change

.support .hnav li {
   display: inline-block;  //from inline 
}

http://jsfiddle.net/jasongennaro/jSvdW/1/