html - DIV容器的高度

DIV容器有问题。

.inner-teaser {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}
.bg-blue {
    background: blue;
}
.teaser-image {
    background-position: center;
    background-size: 350px;
    width: 250px;
    height: 250px;
    border-radius: 150px;
}
.image-left {
    float: left;
    margin-right: 50px;
}

<div class="outer-teaser bg-blue">
    <div class="inner-teaser">
        <div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">Image</div>
        <div class="teaser-text">Lorem ipsum dolor...</div>
    </div>
</div>

inner-teaser应具有teaser-image的高度（250px）+ 20px填充。但是inner-teaser的高度仅为40px（2 * 20px填充）。

最佳答案

将overflow: hidden添加到.inner-teaser以强制其采用浮动儿童身高：

.inner-teaser {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    overflow: hidden;
}
.bg-blue {
    background: blue;
}
.teaser-image {
    background-position: center;
    background-size: 350px;
    width: 250px;
    height: 250px;
    border-radius: 150px;
}
.image-left {
    float: left;
    margin-right: 50px;
}

<div class="outer-teaser bg-blue">
    <div class="inner-teaser">
        <div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">Image</div>
        <div class="teaser-text">Lorem ipsum dolor...</div>
    </div>
</div>