html - 如何阻止此 div 重叠？

Question

所以我在 div 元素内有 3 个并排的 div，在它们之后有另一个 div。但是，此 div 与其他 div 重叠。如何让“footer”出现在“main”之后？

.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 即可:

.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;
}

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

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

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

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