容器div不会扩展到适合子div（没有浮动）

Question

我的容器div不会扩展以适合其子div - 其顶部：20px值。 我甚至没有浮动并且使用了溢出：隐藏（削减子div的一部分）或overflow：auto（创建滚动条）。

请参阅codepen示例：Codepen

<div class="container">
<div id="model">fdsf</div>
</div>

感谢这个问题的任何解决方案。

Answer 1

删除top和position媒体资源并使用margin: 10px auto 0 auto;

#model {
  background: yellow;
  border: 1px solid orange;
  width: 100px;
  height: 100px;
  margin: 10px auto 0 auto;
  display: block;
}

<强> Demo

Answer 2

1）在您的示例中，容器正在扩展以正确适合子div。孩子的身高是100px加上1px边界的两倍，总共102px。然后，容器的高度正好是102px，因为任何浏览器中的开发人员工具都可以告诉你。

内容的高度总计为102px，因此容器的内部高度为102px。根据定义，这是“扩展以适应内容”。

2）现在，您正在为您的孩子div设置position: relative。以下来自Mozilla Developer Network的引用应该对您的示例中发生的事情给出完整的解释。

相对定位：

  

此关键字列出所有元素，就好像元素不是   定位，然后调整元素的位置，而不改变   布局（从而为元素留下一个空隙   一直没有定位）。位置的影响：相对于   table - * - group，table-row，table-column，table-cell和table-caption   元素未定义。

第3） 显然，您可以通过摆脱相对定位来摆脱这种影响，而只需使用margin。关于您的评论，不，top，right，bottom和left绝对不行。它们用于完全不同的东西，因为上面引用的内容。