根據父div中的子div更改父div的大小

Question

我有一個div沒有改變它的高度的問題，當它的內部內容（如ul ，其他div等）發生變化時，它沒有在CSS中設置。

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

在這里演示

Answer 1

添加overflow: auto; 到#main_wrapper 。

Answer 2

div沒有采用其中元素的高度的原因與顯示浮動元素的怪癖有關。 在帶有clear: both;的#navigation元素之后添加一個空元素clear: both; 作為樣式將導致#main_wrapper適合浮動元素的高度。

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

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