用于定义列表和背景框的 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

你需要清除 float :

http://jsfiddle.net/WFnKw/