添加浮动时折叠的div

Question

我有一个带有无序列表的div，周围有一个边框。当我将其中的文本设置为向左浮动时，它会折叠div并且边框向上压扁。

不确定为什么会这样。

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

更新：我只是想首先感谢大家的回应，这有助于我更好地理解这个问题。我发现一个链接，我认为可能会使遇到这个问题的人受益，它以非常简单的方式解释了溢出：隐藏和清除浮动技术。它还详细介绍了浮子。 http://css-tricks.com/795-all-about-floats/

Answer 1

更改此css：

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

是你想要的吗？

Answer 2

元素不会自动展开以包含浮动子元素。

使用clear fix method。

我会在此示例中的父元素上使用overflow: hidden。

jsFiddle

Answer 3

更改

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

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