如何清除浮動的無序列表

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