如何修复页脚（footer）CSS属性无法正常显示的问题？

核心问题 #

1. HTML结构违规：<footer>标签写在了<body>标签外部，不符合HTML规范，浏览器解析会出错，导致样式无法正常生效。
2. 样式未关联：CSS定义的是.footer类选择器，但HTML中的<footer>标签未添加class="footer"属性，样式根本没作用到目标元素上。
3. CSS属性冲突：padding-top: 40px被后续的padding: 20px完全覆盖，后者是简写属性，会重置所有方向的内边距值。

修正后的代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="styleody.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <p>
    Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College
    in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
    of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
    from a line in section 1.10.32.
  </p>

  <!-- 修正：将footer移至body内部，并添加footer类 -->
  <footer class="footer">
    <div class="footer-content">
      <p>Επικοινωνήστε μαζί μας</p>
    </div>
  </footer>
</body>

</html>

CSS代码

.footer {
  background-color: black;
  height: auto;
  width: 100%;
  color: #fff;
  overflow: auto;
  /* 合并padding属性，避免覆盖问题 */
  padding: 40px 20px 20px;
  float: left;
  /* 优化：避免width:100%时padding导致横向滚动 */
  box-sizing: border-box;
}

额外优化建议 #

• 若不需要浮动布局，可去掉float: left，元素默认display: block，减少不必要的布局属性。
• box-sizing: border-box是通用优化项，能让元素的内边距和边框不会撑开宽度，避免布局溢出。

内容的提问来源于stack exchange，提问作者Ody.K.