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

Question

我以前从未见过这个

我正在开发一个基本的博客网站，现在我已经创建了页面，并且正在添加一个 DIV 容器以用于订阅时事通讯。我发现的是，当我检查我的代码时，除了我的时事通讯 div (.newsletter-container) 之外，一切都在它应该在的地方，出于某种奇怪的原因 div 本身将自己置于另一个 div 但当我输入文本时，文本会出现在 div 下方。我很困惑，不知道怎么解释。

我会说在附加的代码笔中自己看一下以理解我的意思。淡黄色是我的实际 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 class :

clear: both; // or left

容器将在下一行。

这是您想要实现的目标吗？

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

Div background color overlaps other div, but content doesn't

html

css

layout

css-position