Div不会叠加

Question

所以我读过关于堆叠的div，许多帖子建议使用clear：left;但当我这样做时，它“向左清除”所以不起作用。

当我放入div和当前的css样式时，我留下了位于地图div旁边的合法div，与版权/设计div相同，只有那两个堆叠的版权/设计div。

HTML CODE

<div id="footer">
<div id="footerLeft"></div>
<div id="footerMap"></div>
<div id="footerLegal"></div>
<div id="footerLinkedin"></div>
<div id="footerLeftPadding"></div>
<div id="footerFacebook"></div>
<div id="footerRightPadding"></div>
<div id="footerTwitter"></div>
<div id="footerCopyright"></div>
<div id="footerDesign"></div>
<div id="footerRight"></div>
</div>

CSS CODE

#footer {
float:left;
height: 50px;
width: 1200px;
}
#footerLeft{
float:left;
height: 50px;
width: 90px;
}
#footerMap{
float:left;
height: 25px;
width: 366px;
}
#footerLegal{
float:left;
height: 25px;
width: 366px;
}
#footerLinkedin{
float:left;
height: 50px;
width: 48px;
background-image:url(images/footer/web_page_footer_03.png);
background-repeat:no-repeat;
}
#footerLeftPadding{
float:left;
height: 50px;
width: 22px;
}
#footerFacebook{
float:left;
height: 50px;
width: 48px;
background-image:url(images/footer/web_page_footer_05.png);
background-repeat:no-repeat;
}
#footerRightPadding{
float:left;
height: 50px;
width: 22px;
}
#footerTwitter{
float:left;
height: 50px;
width: 48px;
background-image:url(images/footer/web_page_footer_07.png);
background-repeat:no-repeat;
}
#footerCopyright{
float:left;
height: 25px;
width: 366px;
background-image:url(images/footer/web_page_footer_08.png);
background-repeat:no-repeat;
}
#footerDesign{
float:left;
height: 25px;
width: 366px;
background-image:url(images/footer/web_page_footer_10.png);
background-repeat:no-repeat;
}
#footerRight{
float:left;
height: 50px;
width: 90px;
background-image:url(images/footer/web_page_footer_09.png);
background-repeat:no-repeat;
}