求助：如何实现Footer固定在页面底部？

你的Footer无法固定在页面底部，核心原因是页面中的.section、.section2等元素使用了float属性，导致body元素无法正确计算自身高度，Footer会跟随浮动元素的位置排列，而非页面视口底部。

下面提供两种可靠的解决方案：

方案一：Flex布局（推荐） #

这种方法无需依赖浮动，布局更稳定，适配性更强：

1. 修改body的样式，设置为垂直方向的Flex布局，并确保最小高度覆盖视口：

body {
    margin: 0;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

2. 给Footer设置margin-top: auto，让它自动推到页面底部：

.footer {
    background-color: #000;
    padding: 40px;
    margin-top: auto;
}

3. 移除所有section的浮动属性，改用margin实现居中布局（避免浮动带来的高度塌陷问题）：

.section {
    background-color: #F5F5F5;
    display: flex;
    justify-content: space-between;
    padding: 40px;
    width: 80%;
    margin: 50px auto 0;
    /* 去掉原有的float:left */
}

.section2 {
    background-color: #F5F5F5;
    display: flex;
    justify-content: space-between;
    padding: 40px;
    width: 80%;
    margin: 50px auto 0;
    /* 去掉原有的float:right */
}

/* section3、section4做同样修改 */

方案二：绝对定位 #

如果需要保留浮动布局，可以用绝对定位实现，但需注意内容高度避免Footer覆盖：

1. 给body设置相对定位和最小高度，并预留Footer的高度作为底部内边距：

body {
    margin: 0;
    font-family: sans-serif;
    position: relative;
    min-height: 100vh;
    padding-bottom: 200px; /* 值需大于等于Footer的实际高度 */
}

2. 给Footer设置绝对定位，固定在页面底部：

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #000;
    padding: 40px;
    box-sizing: border-box; /* 确保padding不会超出宽度 */
}

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