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

没有让您的问题安静得很好，但您可能遗漏了清除floats ...

Demo

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

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

Demo

Answer 2

根据您尝试实现的效果，可以：

1）将'overflow：hidden'添加到.container div

或

2）在.child div上使用padding-bottom而不是margin-bottom