html - 如何将最后一个div放在页面的最后

Question

在解决前端 Mentor 中的挑战时，我遇到了这个问题：如图所示，页脚位于框后面！！！？？？我试图改变页脚的位置但没有改变..当我向容器类插入边框时，它不包括奇怪的框..这就是代码：

* {
  font-family: arial;
}

.container {
  margin: 50px 150px;
  border: 1px solid;
}

.left {
  width: 45%;
  float: left;
  margin-right: 5%;
}

.left h1 {
  display: inline-block;
  font-size: 50px;
  font-weight: bold;
  font-family: Arial;
  color: #511F50;
  margin-bottom: 0;
}

.left p {
  color: #c79ac7;
}

.right {
  width: 50%;
  float: right;
  position: relative;
}

.right div {
  width: 380px;
  font-weight: bold;
  color: #511F50;
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 15px;
  padding-right: 30px;
  background-color: #F7F2F8;
  margin-bottom: 10px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.right div:first-of-type {
  top: 50px;
  left: 0;
}

.right div:nth-of-type(2) {
  top: 110px;
  left: 15px;
}

.right div:last-of-type {
  top: 170px;
  left: 30px;
}

.right i {
  color: #EA9A50;
  margin-right: 5px;
}

.right i:last-of-type {
  margin-right: 35px
}

.clear {
  clear: both;
}

.box {
  margin-top: 50px;
  position: relative;
}

.box section {
  position: absolute;
  background-color: #511F50;
  width: 30%;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.box img {
  display: inline-block;
  margin: 40px 0 0 20px;
  width: 20%;
  height: 50px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.box .first-box,
.second-box,
.last-box {
  display: inline-block;
  width: 70%;
}

.box h3 {
  color: #fff;
  margin: 40px 0 0 20px;
}

.box span {
  display: inline-block;
  color: #824074;
  margin: 10px 0 0 20px;
}

.box p {
  padding: 20px;
  color: #fff;
}

.box .second-box {
  top: 10px;
  left: 400px;
}

.box section:first-of-type {
  top: 0;
  left: 0;
}

.box section:nth-of-type(2) {
  top: 20px;
  left: 300px;
}

.box section:last-of-type {
  top: 40px;
  left: 600px;
}

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

<script src="https://kit.fontawesome.com/7becc8dd38.js" crossorigin="anonymous"></script>

<div class="container">
  <section class="left">
    <h1>10,000+ of our users love our products.</h1>
    <p>We only provide great products combined with excellent customer service. See what our satisfied customers are saying about our services.</p>
  </section>
  <section class="right">
    <div><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>Rated 5 Stars in Reviews</div>
    <div><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>Rated 5 Stars in Report Guru</div>
    <div><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>Rated 5 Stars in BestTech</div>
  </section>

  <div class="clear"></div>

  <div class="box">
    <section>
      <img src="images/image-colton.jpg" alt="Colton">
      <div class="first-box">
        <h3>Colton Smith</h3>
        <span>Verified Buyer</span>
      </div>

      <div class="clear"></div>

      <p>"We needed the same printed design as the one we had ordered a week prior. Not only did they find the original order, but we also received it in time. Excellent!"</p>
    </section>
    <section>
      <img src="images/image-irene.jpg" alt="Colton">
      <div class="second-box">
        <h3>Irene Roberts</h3>
        <span>Verified Buyer</span>
      </div>

      <div class="clear"></div>

      <p>"Customer service is always excellent and very quick turn around. Completely delighted with the simplicity of the purchase and the speed of delivery."</p>
    </section>
    <section>
      <img src="images/image-anne.jpg" alt="Colton">
      <div class="last-box">
        <h3>Anne Wallace</h3>
        <span>Verified Buyer</span>
      </div>

      <div class="clear"></div>

      <p>"Put an order with this company and can only praise them for the very high standard. Will definitely use them again and recommend them to everyone!"</p>
    </section>
  </div>
</div>

<div class="clear"></div>

<div class="attribution">
  Challenge by
  <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a
      >. Coded by <a href="#">Ahmed Said Abou Farrag</a>.
</div>

那么如何将页面末尾的 .attribute 类作为页脚呢？

标签： htmlcss