html - CSS 相对容器不随 margin-child-elements 缩放

Question

我遇到了以下问题:

我想要一个相对容器元素，其中包含一些子元素，每个子元素都有边距。

如果我不设置容器的高度，它会根据包含的子项调整高度/宽度。

问题是它似乎忽略了它们的边距。

这里是一些代码: CSS:

.container{
    position:relative;
}

.child {
    position:relative;
    float:left;
    width:200px;
    height:50px;
    margin-bottom:20px;
}

html:

    <div class="container">
       <div class="child">hello world</div>
    </div>

容器现在应该将高度调整为 50+20 = 70px， 所以如果我在下面放另一个元素应该没问题，但事实并非如此。 边距似乎不会调整容器高度，如何更改？

Answer 1

没有很好地解决您的问题，但您可能缺少清除 float ...

Demo

.container{
    position:relative;
    border: 1px solid #f00;
    overflow: hidden;
}

或者你也可以使用clear: both;

Demo