html - 如何清除浮动无序列表

Question

我有一个向左浮动的无序列表菜单。我无法让包含 div (#header) 的菜单完全环绕它。这是我所拥有的一个例子..

html

<div id="header">
    <div id="menuCont">
        <ul id="ccMenu">
            <li>Misc</li>
            <li>Web</li>
            <li>Zero</li>
            <li>Whole</li>
            <li>Retail</li>
        </ul>
    </div>
</div>
<div id="body"></div>

css

#header {
    width: 600px;
    border: 1px solid blue;
}
#menuCont {
    border: 1px solid red;
}
#body {
   width: 600px;
    height: 300px;
    border: 1px solid green;
    clear: left;
}
#ccMenu {
    width: 400px;
    list-style-type: none;
}

#ccMenu li {
    width: 75px;
    float: left;
    border: 1px solid black;
}

演示

我相信我让#body div 正确清除，但我无法让#header 环绕菜单；它只是漂浮在其边界之下。我能得到一些帮助吗？

Answer 1

一种方法是添加overflow: hidden;到#header

http://jsfiddle.net/Adrift/5M6vw/1/

Answer 2

添加overflow:auto到#header就可以了。

jsFiddle 示例

Answer 3

浮动 #header 容器和 #menuCont 容器也离开：

http://jsfiddle.net/tahdhaze09/dX7Bm/

#header {
    width: 600px;
    border: 1px solid blue;
    float:left;
}
#menuCont {
    border: 1px solid red;
    float:left;
}
#body {
   width: 600px;
    height: 300px;
    border: 1px solid green;
    clear: left;
}
#ccMenu {
    width: 400px;
    list-style-type: none;
}

#ccMenu li {
    width: 75px;
    float: left;
    border: 1px solid black;
}