collapsed div when adding float

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.

ht开发者_StackOverflow中文版tp://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/

change this css:

.support .hnav li a {
    text-decoration: none;
    background: url("sprites/sprite-icons.png") no-repeat scroll left top transparent;
    display: inline-block;
}

is that what you were wanting?

Change

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

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

An element does not automatically expand to contain floated children.

Use a clear fix method.

I would use overflow: hidden on the parent element in this example.

jsFiddle.