根據孩子更改父div的大小的DIV在它

Question

我有一個問題與div不改變它的高度，其未在CSS設置，當其內的內容（例如ul，其他div S，等）變化。

我的html代碼：

<div id="main_wrapper"> 
    <div id="navigation"> 
     <ul> 
      <li><a href="#"> link one </a></li> 
      <li><a href="#"> link two </a></li> 
      <li><a href="#"> link three </a></li> 
      <li><a href="#"> link four </a></li> 
     </ul> 
    </div> 
</div> 

我的CSS代碼：

#main_wrapper { 
    display: block; 
    border:1px solid black; 
} 
#navigation { 
    background-color: rgba(0, 0, 0, 0.4); 
    position: relative; 
    padding: 8px; 
    float: right; 
} 

演示here

Answer 1

添加overflow: auto;到#main_wrapper。

Answer 2

div沒有考慮到它內部元素的高度的原因與顯示浮動元素的怪癖有關。將#navigation元素與clear: both;作爲樣式添加一個空元素將導致#main_wrapper適合浮動元素的高度。

或者，您可以將display: inline-block;添加到包裝div，但您還必須指定寬度（width: 100%;）。使用clearfix是首選解決方案。

演示： http://jsfiddle.net/NXNDV/4/