如何阻止这个div重叠？

Question

所以我在div元素中并排有3个div，然后是另一个div。但是，这个div与其他div重叠。如何让“页脚”跟在“主”之后？

.main {
  height: 500px;
  width: 100%;
  position: absolute;
}

.filter {
  background: red;
  height: 100%;
  float: left;
  width: 20%;
}

.post-bar {
  background: blue;
  height: 100%;
  float: left;
  width: 60%;
}

.advertisment {
  background: green;
  height: 100%;
  float: left;
  width: 20%;
}

.footer {
  height: 250px;
  width: 100%;
  background: black;
  position: relative;
}

<div class="main">
  <div class="filter">

  </div>
  <div class="post-bar">

  </div>
  <div class="advertisment">
  </div>

</div>
<div class="footer"></div>

Answer 1

在主要课程中摆脱position:absolute：

＆＃13;

＆＃13;

.main {
  height: 500px;
  width: 100%;
}

.filter {
  background: red;
  height: 100%;
  float: left;
  width: 20%;
}

.post-bar {
  background: blue;
  height: 100%;
  float: left;
  width: 60%;
}

.advertisment {
  background: green;
  height: 100%;
  float: left;
  width: 20%;
}

.footer {
  height: 250px;
  width: 100%;
  background: black;
  position: relative;
}

＆＃13;

<div class="main">
  <div class="filter">

  </div>
  <div class="post-bar">

  </div>
  <div class="advertisment">
  </div>

</div>
<div class="footer"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需删除

即可

position: absolute;
display: block;

这 .main

我想你会找到你想要的结果。请告知是否还有其他问题。谢谢。

Answer 3

从主页和页脚中删除位置。

.main {
  height: 500px;
  width: 100%;
  float:left;
}

.footer {
  height: 250px;
  width: 100%;
  background: black;
  float:left;
}