css - 使用浮动将两个元素彼此相邻定位，清除：两者都可以选择吗？

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;
}

Answer 2

您可以使用该overflow样式。通过不为父级指定任何大小，实际上不会溢出任何内容，但它仍会使其包含其子级：

.wrapper {
    overflow: hidden;
}

旁注：display:inline对设置为浮动的元素进行设置是没有意义的，因为浮动元素始终是块元素：

.left, .right {
    float:left;
}

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