CSS的定義列表和背景框

Question

我試圖框起來元素的列表，並顯示在它下面一些文字：

<div class="ft_models"> 
    <dl> 
     <dt>Models:</dt> 
     <dd> 
      <div>Item 1</div> 
      <div>Item 2</div> 
      <div>Item 3</div> 
     </dd> 
    </dl> 
</div> 

<div> 
    Some stuff here 
</div> 

到目前爲止，我的CSS讀取

.ft_models 
{ 
    margin: 10px 5px 10px 0; 
    padding: 10px; 
    background-color: #F8F8F8; 
    color: #000; 
} 

.ft_models dt 
{ 
    display: inline; 
    float: left; 
    clear: left; 
    margin: 0 0.5em 0 0; 
} 
.ft_models dd 
{ 
    display: inline; 
    float: left; 
    margin: 0 0.5em 0 0; 
} 

問題首先，我的物品清單中的灰色框不會圍繞所有物品展開。第二個問題是，隨後的DIV（這裏有些東西）顯示的項目列表，而不是下面的一面。

如何擴展圍繞項目列表中的灰色框，低於它，而不是在一旁以下的div顯示？

http://jsfiddle.net/96pfX/

Answer 1

你需要清除浮動：

http://jsfiddle.net/WFnKw/