HTML/CSS网站作业：文章页Footer与Wrapper及内容重叠问题求助

嘿，我看了你的代码问题，核心原因是浮动元素没有被正确清除，加上Footer的布局设置有误，导致它脱离了正常文档流，跑到内容上方去了。给你几个具体的修复步骤：

• 清除Wrapper的浮动，让父容器感知到它的高度
  你的.wrapper用了float: left，这会让它“跳出”正常文档流，Body没法识别到它的实际高度，Footer自然就往上跑了。最优雅的解决办法是给.wrapper加一个清除浮动的伪元素，不用额外加HTML标签：

  .wrapper:after {
    content: "";
    display: table;
    clear: both;
  }
  

• 调整Footer的样式，让它正常适配Body宽度
  检查下你的Footer样式，应该移除那些会让它脱离文档流的属性（比如position: absolute），同时确保它能铺满整个Body宽度，并且落在浮动元素的下方：

  footer {
    width: 100%;
    clear: both; /* 强制Footer在所有浮动元素下方 */
    position: relative; /* 保持正常文档流 */
    background: #你的背景色;
    padding: 1.5rem 0; /* 给Footer加内边距，让内容不贴边 */
  }
  

• 检查Body和Wrapper的基础布局
  确保Body没有设置overflow: hidden或者奇怪的margin值，.wrapper可以用max-width: 1200px; margin: 0 auto;来实现居中，这样既限制了内容宽度，又不会超出Body范围。

这样调整后，Footer就会乖乖落在文章内容的下方，并且铺满整个Body宽度，不会再和内容重叠啦。

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