css div高度auto不能正確包裝

Question

我有一個名爲＃子菜單的包裝器，它在下面的cssdesk文件中以黃色顯示。我將它的高度設置爲auto，但不幸的是它沒有正確包裝所有內容。這個問題讓我瘋狂。希望有人能幫忙。預先感謝您的回覆。乾杯。馬克。

http://cssdesk.com/AVpjR

Answer 1

添加overflow:auto;您#sub-menu

參見：http://cssdesk.com/qBUdf

Answer 2

浮動元素是什麼破壞了高度。你需要添加一個新的div來清除父容器高度的所有浮動元素以填充整個長度。

HTML：

<div id="sub-menu"> 
<div id="form-loc"> 
     <a id="appliquer-loc" class="button white">filtrer</a> 
     <div id="saisi-loc"> 
      <input id="input-loc" type="text"/> 
      <a id="valider-loc" class="button white">valider</a> 
      <a id="supprimer-loc" class="button white">supprimer</a>  
      <span id="msg-loc">Valeur saisie incorrecte</span> 
     </div> 
    </div> 
    <div id="proposition-loc"> 
     <a id="proposer-loc" class="button white">+ Proposer une sortie</a> 
    </div> 
    <div class="clear"></div> 
</div> 

CSS：

#sub-menu{ 
    width:960px; 
    height:auto; 
    margin-left:auto; 
    margin-right:auto; 
    background-color:yellow; 
} 

#form-loc{ 
    width:800px; 
    height:auto; 
    float:left; 
    position:relative; 
    background-color:rgba(1,1,1,0.2);} 

#saisi-loc{ 
    background-color:rgba(123,123,123,0.2); 
    width:auto;} 

#input-loc{ 
    width:300px; 
    height:25px; 
    border:1px solid gray;} 

#msg-loc{ 
    font-size:14px; 
    padding:0 10px; 
    font-weight:bold; 
    background-color:pink;} 

#proposition-loc{ 
    text-align:right;} 

.clear { 
    clear: both; 
}