Div背景色与其他div重叠，但内容不重叠

Question

我之前从未见过

我正在一个基本的博客网站上工作，现在我已经创建了该页面，并且正在添加DIV容器以用于订阅新闻通讯。但是我发现，当我检查代码时，除了新闻简报div（.newsletter-container）之外，所有内容都应该位于该地方，出于某种奇怪的原因，div本身将自身置于另一个div之上，但是当我键入文本时，文字低于该div。我对此感到非常困惑，并且真的不知道如何解释它。

我会说自己在附加的Codepen中对其进行了了解，以了解我的意思。淡黄色是我的实际div，您可以在分页旁边看到它显示该div的内容。但是背景色和内容都必须放在分页下方

谢谢，请告诉我我做错了什么，因为我有一段时间没有建网站了。

我的代码：codepen

时事通讯代码：

.newsletter-container {
  position: relative;
  background-color: rgba(252, 250, 238, 1);
  /* padding: 50px 0px; */
  height: 200px;
  color: black;
}

<div class="newsletter-container">CONTENT OF NEWSLETTER</div>

    

Answer 1

在上面的容器中（您的分页），如果您添加到float: left类中，则会有很多.newsletter-container元素：

clear: both; // or left

容器将在下一行中。

这是您想要达到的目标吗？