Question

我想知道.content-b的底边为什么不会伸展.container吗？

.container {
  background: grey;
}

.content-a,
.content-b {
  height: 100px;
  border: 1px solid red;
  margin-bottom: 100px;
}

<div class="container">
  <div class="content-a"></div>
  <div class="content-b"></div>
</div>

如果您检查.content-b，则可以看到浏览器呈现了边距，如果有的话，它将下推其下方的元素，但是它不应该拉伸容器本身吗？

fiddle

Answer 1

将overflow: auto;添加到您的container：

  .container {
  background: grey;
  overflow: auto;
}

.content-a,
.content-b {
  height: 100px;
  border: 1px solid red;
  margin-bottom: 100px;

<div class="container">
  <div class="content-a"></div>
  <div class="content-b"></div>
</div>

Answer 2

拥有一个margin只会使其溢出。

overflow的默认值为visible，这意味着它将显示在容器外部，并且您的margin没有背景色。

给您的container一个overflow: auto属性就可以了

最后一个元素的边距底部不会拉伸其容器

2 个答案: