Question

在我的投资组合网站上工作，以及我的＆＃34;关于＆＃34; section是三列文本，为较小的屏幕堆叠（使用媒体查询执行此操作）。现在我想在＆＃34;关于＆＃34;下面添加一个页脚部分。部分，但包含我的页脚的div重叠＆＃34;关于＆＃34;部分。

这基本上就是我所拥有的，虽然非常简化：

＆＃13;

#about {
  height: 100%;
  width: 100%;
  margin: 0 auto;
}

.section1 {
  width: 40%;
  margin: 5% 2% 5% 5%;
  display: block;
  float: left
}

.section2 {
  width: 20%;
  margin: 5% 2% 5% 5%;
  display: block;
  float: left;
}

.section3 {
  width: 15%;
  margin: 5%;
  display: block;
  float: left;
}

@media screen and (max-width: 768px) {
    #about {
      position: static;
  }
    .section1 { 
      float: none;
      margin-right: 5%;
      width: auto;
  }
    .section2 {
      float: none;
      margin: 15% 5% 0% 5%;
      width: auto;
  }
    .section3 {
      float: none;
      margin: 15% 5% 20% 5%;
      width: auto;
  }
}

#footer {
    width: 70%;
    height: 0%;
    margin: 0% 15% 10% 15%;
    border-top-style: solid;
    border-top-width: thin;
    border-top-color: #5f5e5f;
}

＆＃13;

<div id="About">
    <div class=section1>
        <h4>Title</h4>
        <p>Some Text here. This is the largest section of the three.</p>
    </div>
    <div class=section2>
        <h4>Title</h4>
        <p>Some Text here.</p>
    </div>
    <div class=section3>
        <h4>Title</h4>
        <p>Some Text here.</p>
    </div>
</div>

<div id="footer">
    <p>Footer Text Here</p>
</div>

＆＃13;

我可以将页脚放置在桌面视口中（尽管它仍然会在小屏幕上的＃34;关于＆＃34;部分），但是我找不到一种方法来定位它桌面和移动屏幕的页面底部。

Answer 1

您需要清除“关于”部分中的浮动。您可以通过向页脚添加clear声明来实现此目的（我将#footer规则集移到了顶部以便于查看）。这是另一种情况，即clearfix hack过多，对于这种简单的场景来说完全没有必要。

#footer {
    clear: both;
    width: 70%;
    height: 0%;
    margin: 0% 15% 10% 15%;
    border-top-style: solid;
    border-top-width: thin;
    border-top-color: #5f5e5f;
}

#about {
  height: 100%;
  width: 100%;
  margin: 0 auto;
}

.section1 {
  width: 40%;
  margin: 5% 2% 5% 5%;
  display: block;
  float: left
}

.section2 {
  width: 20%;
  margin: 5% 2% 5% 5%;
  display: block;
  float: left;
}

.section3 {
  width: 15%;
  margin: 5%;
  display: block;
  float: left;
}

@media screen and (max-width: 768px) {
    #about {
      position: static;
  }
    .section1 { 
      float: none;
      margin-right: 5%;
      width: auto;
  }
    .section2 {
      float: none;
      margin: 15% 5% 0% 5%;
      width: auto;
  }
    .section3 {
      float: none;
      margin: 15% 5% 20% 5%;
      width: auto;
  }
}

<div id="About">
    <div class=section1>
        <h4>Title</h4>
        <p>Some Text here. This is the largest section of the three.</p>
    </div>
    <div class=section2>
        <h4>Title</h4>
        <p>Some Text here.</p>
    </div>
    <div class=section3>
        <h4>Title</h4>
        <p>Some Text here.</p>
    </div>
</div>

<div id="footer">
    <p>Footer Text Here</p>
</div>

Answer 2

您可以使用伪元素清除 float ，而不是添加新类，这些日子非常流行：

CSS

/* A slight change in your CSS */
#about {
   position: relative;
   height: 100%;
   width: 100%;
   margin: 0 auto;
}

/* clearfix CSS for clearing the float of your child elements */
#about::after, 
#about::before { 
    content: ""; 
    display: table;
}

#about::after {
    clear: both;
}

为了更好地了解，我在这里创建了一个JSFiddle

为什么浮动元素后面的元素重叠？

2 个答案:

CSS