Html 页脚不在底部

我有一个网站，我正在为所有页面添加页脚。在所有页面上，除了页面右侧带有方框的页面外，页脚保持在底部。在该页面上，页脚显示为浮动在文本的左侧，而不是应该在底部。以下是该特定页面的代码：

HTML

<aside class="expert">
    <h2>Always a Satisfied Customer</h2>
    <ul class="b">
        <li>Upfront Pricing</li>
        <li>Affordable Rates</li>
        <li>Courteous and Respectful</li>
        <li>Always On Time</li>
    </ul>
</aside>

<aside class="refer">
    <p>I would recommend EJP to anyone and everyone!  They showed up, looked at my issue, and fixed it promptly.  They are simply the best!  <br />-Tim S.</p>
</aside>

<p>EJP Electric offers repairs, upgrades, and installations, delivering high customer satisfaction by getting the job done right the first time.</p>

<footer>
    <div id="footer">
        <address>EJP Electric<br />
                 8603 E M115<br />
                 Cadillac, MI 49601<br />
                 231-775-3799<br />
                 <a href="mailto:ray@ejpelectric.com">Email</a>
        </address>
    </div>
</footer>

---

应使用以下属性清除浮动：

clear

CSS属性指定元素是否可以位于 位于其前面或必须向下移动（清除）的元素 在他们下面

页脚{
明确：两者皆有；
}

.expert{
背景色：白色；
显示：块；
边框：实心；
浮动：对；
右：20px；
填充：3倍；
}
.参考{
背景色：白色；
边框：实心；
浮动：对；
清楚:对,；
宽度：150px；
显示：块；
边缘顶部：5px；
填充物：5px；
}
#页脚{
位置：绝对位置；
宽度：600px；
字体大小：12px；
浮动：左；
}
页脚{
明确：两者皆有；
}

---

根据HTML5语义，您的标记是不正确的，当然，如果它不仅仅是它的一部分，您可以在这里阅读：

现在谈谈你的问题：

html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}

#main {
    padding-bottom: 150px; /*should be the same as footer height*/
}
#footer { 
    position: relative;
    margin-top: -150px; /*negative value of footer height*/
    height: 150px;
    clear: both;
} 

<div id="wrap">
    <div id="main"></div>
</div>
<div id="footer"></div>

html，body，#wrap{height:100%；}
body>#wrap{高度：自动；最小高度：100%；}
#主要{
填充底部：150px；/*应与页脚高度相同*/
}
#页脚{
位置：相对位置；
页边距顶部：-150px；/*页脚高度的负值*/
高度：150像素；
明确：两者皆有；
} 

有<代码>清除：两者都有应该这样做。谢谢！这帮了大忙。再一次，令人惊讶的是，答案是多么简单。

html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}

#main {
    padding-bottom: 150px; /*should be the same as footer height*/
}
#footer { 
    position: relative;
    margin-top: -150px; /*negative value of footer height*/
    height: 150px;
    clear: both;
} 

<div id="wrap">
    <div id="main"></div>
</div>
<div id="footer"></div>