用浮动，清晰的方式将两个元素彼此相邻放置：两种替代方案？

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 here

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

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

Answer 2

您可以使用overflow样式。通过不为父级指定任何大小，没有任何实际溢出的东西，但它仍然会使它包含它的子级：

.wrapper {
    overflow: hidden;
}

旁注：在设置为float的元素上设置display:inline是没有意义的，因为浮动元素是块元素：

.left, .right {
    float:left;
}

（然而，在浮动元素上使用display:inline用于对抗IE6中的双边距错误，因此可以在较旧的代码中找到它。）