HTML与CSS开发页脚异常置顶及span标签样式问题咨询

• 所有核心元素均设置了position: absolute，绝对定位会脱离正常文档流，父级<body>无法感知这些元素的高度，自身高度为0。页脚没有指定top属性，默认会对齐文档流初始位置也就是页面最顶部，你设置的clear: both对绝对定位元素完全无效，该属性仅用于清除浮动影响。
• <span>是行内元素，不允许嵌套<p>这类块级元素，不符合HTML语法规范，会导致渲染逻辑异常，这也是你怀疑span出问题的核心原因。
• 页脚设置width: 300%属于错误配置，会触发不必要的横向滚动条。

替换非法的span嵌套，改用符合语义的块级元素，抛弃全量绝对定位的排版逻辑，改用flex布局实现页脚沉底效果，修复后代码如下：

修正后CSS代码 #

/* 先给html和body设置基础高度，方便flex布局沉底页脚 */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.aboutuspagetitle {
  color: rgba(159,74,74,1);
  margin-top: 176px;
  margin-left: 660px;
  font-family: Merriweather Sans;
  font-weight: Bold;
  font-size: 40px;
  opacity: 1; 
}
.aboutuspagedesc {
  color: rgba(0,0,0,1);
  margin-top: 47px;
  margin-left: 30px;
  font-family: Merriweather Sans;
  font-weight: normal;
  font-size: 33px;
  opacity: 1;
  text-align: left;
  /* 撑满剩余空间，把页脚挤到最底部 */
  flex: 1;
}
.footer {
  height: 75px;
  background-color: #121212;
  font-family: Karla Tamil Upright;
  color: white;
  text-align: center;
  position: relative;
  width: 100%;
}
.foot1{
  width: 304px;
  color: rgba(255,255,255,1);
  margin: 0 auto;
  padding-top: 0;
  font-family: Karla Tamil Upright;
  font-weight: normal;
  font-size: 18px;
  opacity: 1;
}
.foot2{
  width: 304px;
  color: rgba(255,255,255,1);
  display: block;
  margin: 12px auto 0;
  font-size: 14px;
  opacity: 1;
}

修正后HTML代码 #

<body>
  <h1 class="aboutuspagetitle">ABOUT US</h1>
  <div class="aboutuspagedesc">
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo nisl ut justo tincidunt, ac laoreet nunc elementum.</p>
  </div>
  <div class="footer">
    <p class="foot1">THIS IS AN ADDRESS</p>
    <a><span class="foot2">© 2021</span></a>
  </div> 
</body>

内容的提问来源于stack exchange，提问作者Maple06