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;
}

Demo

我相信我已经#body div正确清除了，但我无法让#header环绕菜单;它只漂浮在它的边界下面。我可以得到一些帮助吗？

Answer 1

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

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

Answer 2

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

<强> jsFiddle example

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;
}

如何清除浮动的无序列表

3 个答案: