页脚和登录表单相互重叠

Question

我的 HTML 用于登录表单：

<div class="middle-box text-center loginscreen">
    <div>
        <form class="" role="form" action="index.html">
            <div class="form-group">
                <input type="email" class="form-control" placeholder="Email" required="">
            </div>
            <div class="form-group">
                <input type="password" class="form-control" placeholder="Password" required="">
            </div>
                <button type="submit" class="btn btn-primary btn-block">Login</button>

                <a href="#"><small>Forgot password?</small></a>
    </div>
</div>

<!-- footer -->
<footer>
    <div class="container">
        <div class="col-md-3">
            <p><a class="navbar-brand" href="#">Ali Academy</a></p>
        </div><!-- end of col -->

        <div class="col-md-6">
            <nav>
                <ul class="list-inline">
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Blog</a></li>
                  <li><a href="#">About Us</a></li>
                  <li><a href="#">Contact</a></li>
                </ul>           
            </nav>
        </div><!-- end of col -->

        <div class="col-md-3">
            <p class="pull-right">&copy; 2015 Ali Academy</p>
        </div><!-- end of col -->       
    </div><!-- end of container -->
</footer>

CSS 是：

.middle-box {
    height: 400px;
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -200px;
    z-index: 100;
}
.lockscreen.middle-box {
    width: 200px;
    margin-left: -100px;
    margin-top: -190px;
}
.loginscreen.middle-box {
    width: 300px;
    margin-left: -150px;
    margin-top: -200px;
}

/* FOOTER */
footer {
    background: #263949;
    color: white;
    padding: 20px 0px 0px;
    font-size: 12px;
}

footer p {
    margin: 0px;
}
footer a:link, footer a:visited {
    color: white;
}
footer a:hover {
    color: #dd5638;
}

它导致浏览器上的问题为：

请帮助我。

Answer 1

添加＆＃34; clearfix＆＃34;上课。

   <form action="index.html" class="clearfix">
     .................
   </form>