一个关于浮动与清除浮动的问题，麻烦助教了

在footer__nav上设置了浮动，然后在它的后续元素footer__copyright上设置了clear:both，以后，为什么footer__copyright的margin-top不能正确显示呢，会与footer__nav的内容重叠，应该怎么理解这种问题呢，又怎么解决这个问题？麻烦了。

<footer class="footer">

<nav class="footer__nav">

<a href="javascript:;" class="footer__nav-item">网站首页</a>

<a href="javascript:;" class="footer__nav-item">人才招聘</a>

<a href="javascript:;" class="footer__nav-item">联系我们</a>

<a href="javascript:;" class="footer__nav-item">高校联盟</a>

<a href="javascript:;" class="footer__nav-item">关于我们</a>

<a href="javascript:;" class="footer__nav-item">讲师招募</a>

<a href="javascript:;" class="footer__nav-item">意见反馈</a>

<a href="javascript:;" class="footer__nav-item">友情链接</a>

</nav>

<div class="footer__copyright">Copyright © 2016 imooc.com All Right Reserved | 京ICP备13046642号</div>

</footer>

css:

.footer {

width: 100%;

height: 106px;

background: #000000;

padding: 1px;

text-align: center;

}

.footer__nav {

float: left;

margin-top: 32px;

}

.footer__nav-item {

float: left;

font-size: 12px;

line-height: 12px;

color: #c8ccd2;

}

.footer__nav-item:first-child ~ a {

margin-left: 32px;

}

.footer__copyright {

clear: both;

margin-top: 12px;

font-size: 18px;

line-height: 18px;

color: #787d82; 

text-align: center;

}