最后一个元素边距底部不会拉伸其容器[重复]答案

【问题标题】：Last element's margin-bottom wont stretch its container [duplicate]最后一个元素边距底部不会拉伸其容器[重复]
【发布时间】：2019-06-22 20:23:59
【问题描述】：

我想知道为什么 .content-b 的 margin-bottom 不会拉伸 .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，您会看到浏览器呈现了边距，并且如果有任何元素，它会向下推它，但它不应该拉伸容器本身吗？

【问题讨论】：

标签： html css

【解决方案1】：

拥有margin 只会让它溢出。

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

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

【讨论】：

【解决方案2】：

将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>

【讨论】：