页脚与内容重叠

Question

我试图将“ Vaccet”图片放在页脚中，但是它继续在“ UPM”图片旁边。

我尝试从身体上移除页脚。在我创建的其他网站上，页脚的内容位于其上方的部分下方，但位于其旁边。

   .column-2 {
      float: left;
      width: 33.3%;
      padding: 5px;
      padding-right: 30px;
      display: inline-block;
    }
    
    .column-3 {
      float: right;
      width: 30%;
      display: inline-block;
      padding-right: 30px;
      padding
    }
    
    .section-team{
        text-align: center;
        
    }
    
    .members{
        border-radius: 50%;
    }
    
    .upm{
        padding-top: 25px;
        padding-right: 5px;
    }
    
    footer{
        padding: 50px;
        font-size: 80%;
        
    }
    
    .footer-nav{
       display: inline-block;
       width: 100%
    }

    <section class="section-team" id="team">
        <div class="row">
           <h2>team members</h2>    
        </div>
      <div class="column-2">
        <img src="img/faceexample.jpg" class="members" alt="members" style="width:50%">
        <h3>Adam</h3>
      </div>
       <div class="column-2">
        <img src="img/faceexample.jpg" class="members" alt="members" style="width:50%">
        <h3>Adam</h3>
      </div>
       <div class="column-2">
        <img src="img/faceexample.jpg" class="members" alt="members" style="width:50%">
        <h3>Adam</h3>
      </div>
       <div class="column-2">
        <img src="img/faceexample.jpg"  class="members" alt="members" style="width:50%">
        <h3>Adam</h3>
      </div>
       <div class="column-2">
        <img src="img/faceexample.jpg" class="members" alt="members" style="width:50%">
        <h3>Adam</h3>
      </div>
       <div class="column-2">
        <img src="img/faceexample.jpg" class="members" alt="members" style="width:50%">
        <h3>Adam</h3>
      </div>
        <div class="column-3">
        <img src="img/upm.jpg" class="upm" alt="upm" style="width:30%">
        <h4>UPM</h4>
      </div>       
        </section>
         <footer>
              <div class="row">
                <div class="col span-1-of-2">
                    <ul class="footer-nav">
                          <img src="img/Vaccet.jpg" alt="vaccet logo" 
                            class="logo">
                    </ul>
                </div> 
            </div>



 

我希望有人可以告诉我如何解决页脚问题

Answer 1

我认为问题在于<section>未被明确解决。使用float元素时，务必清除容器（在这种情况下为.section-team）

尝试以下CSS（Clearfix Hack）：

.section-team:after,.section-team:before{
  content:''
  clear:both;
  display:table;
}

Answer 2

这是一个持续的问题。 Footer看到了空间，并试图将自己挤压在该空间中。

尝试：

footer{
    clear: both;
}

否则，您可能想给您的部门提供width: 100%。