html - 用 float 左 CSS 排列 SPAN 和 DIV

Question

我正在尝试将我的 span 安排到一个带有 float left 的 div，但是当我将 float left 放在 CSS 中时，似乎 span 不再位于 div 内部。

我试着用一张图来解释:

这是我尝试编写的代码:

HTML

    <div class="block1">
        <div class="head-block-1">
            Best Selling Tickets
        </div>
        <div class="content-block-1">
            <div>
                <span class="data-block-1">
                    <img src="/nutickets2/images/circle.png" height="55px">
                </span>
                <span class="data-block-1">
                    <span>Adult - General</span><span><br>TEST TEST</span>
                </span>
                <span class="data-block-1">
                    <span>50 sold since Jan 17</span><span><br>20% more sold than last period</span>
                </span>
            </div>
        </div>
    </div> 

CSS

.block1 {
    width: 96%;
    height: 96%;
    box-shadow: 2px 2px 2px #d1d1d1;
    margin-bottom: 25px;
    margin-left: 10px;
}

.head-block-1 {
    width: 100%;
    background-color: #f6f6f6;
    padding: 15px;
    border: 1px solid #d1d1d1;
}

.content-block-1 {
    width: 100%;
    border: 1px solid #d1d1d1;
    padding: 15px;
}

.data-block-1 {
    width: 33%; 
    float: left;
}

Answer 1

将 overflow:auto; 添加到包含的 div。

父元素永远不会展开以包含 float 的子元素。因此，为了让他们这样做，您需要告诉父级溢出容器的元素应该自动扩展以包含它们。

还有其他方法可以做到这一点，但这是最简单的。搜索“清除 float ”