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