css - 相对 DIV 没有高度

Question

我不明白我的代码有什么问题。我的意思是，section 元素有高度，我的 DIV 元素的显示值肯定是块，我真的不知道它是如何工作的以及如何将这两个不同位置的元素组合起来。请给我您今天学习新东西的解决方案和建议。

div {
  position: relative;
  margin: 0 30%;
}

div section {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100px;
  background-color: yellow;
}

hr {
  height: 2px;
  background-color: blue;
}

<div>
  <section></section>
</div>

<hr>

Answer 1

您希望您的 hr 位于第一个 div 的底部，对吗？

但是，这不起作用，因为父 div 有一个默认height: auto属性。
这意味着父 div 将具有其子级的高度。当你对孩子
设置 a 时，你就破坏了这个系统。 父母将不再照顾他的孩子。 position: absolute

所以，如果你想让它工作，你有两个 解决方案： -在父 div 上
设置自定义高度 ( ) （不好） - 删除子部分的绝对位置（默认：）height: 100px
position: relative

div {
  position: relative;
  margin: 0 30%;
}

div section {
  height: 100px;
  background-color: yellow;
}

hr {
  height: 2px;
  background-color: blue;
}

<div>
  <section></section>
</div>

<hr>