如何清除浮动无序列表答案

【问题标题】：How to clear floated unordered list如何清除浮动无序列表
【发布时间】：2013-05-03 17:26:22
【问题描述】：

我有一个向左浮动的无序列表菜单。我无法让包含 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;
}

Demo

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

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

jsFiddle example

【讨论】：

这行得通，但在我的实际应用程序中给了我愚蠢的垂直滚动条（虽然不在 jsfiddle 中）。不知道为什么，因为我没有垂直限制。

【解决方案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;
}

【讨论】：

我不希望标题 div 向左浮动。我希望它居中。
从技术上讲，您没有将 div 与您拥有的 CSS 居中。您希望整个布局居中吗？如果你浮动一个 div 的内容，容器就会崩溃。另一个选项是给 #menuCont 高度以包含菜单。我编辑了jsfiddle，看看：jsfiddle.net/tahdhaze09/dX7Bm/1
哦，是的，我刚刚注意到我没有在演示中将 div 居中。对此感到抱歉。