使用 float 将两个元素并排放置，clear:both 替代方案？

Question

当我想将两个元素彼此相邻放置时，就像这样

<div class="wrapper">
    <div class="left"> ... </div>
    <div class="right"> ... </div>
</div>

我可以使用以下CSS：

.left, .right {
    display:inline;
    float:left;
}

但如何让包装器在没有clear:both属性的情况下调整其高度以适应子元素？

Answer 1

由于未明确指定高度，因此设置overflow:auto将使父级包含子级。

.wrapper {
    overflow:auto;
}

jsFiddle 在这里

......之前 ............之后

.left, .right {
    display:inline;
    float:left;
    height:50px;
    width:50px;
    background:blue;
    margin:10px;
}
.wrapper {
    overflow:auto;
    background:red;
    width:140px;
    display:block;
}