html - CSS 相对容器不随边距子元素缩放

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，所以如果我在下面放置另一个元素应该没问题，但事实并非如此。边距似乎没有调整容器高度，如何改变这个？

score 0 · Accepted Answer

根据您要达到的效果，可以：

1) 将 'overflow:hidden' 添加到 .container div

或者

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

score 0 · Accepted Answer

没有让你的问题安静下来，但你可能错过了清除你的floats...

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

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

2 回答 2