Html 奇怪的css行为-图像内联不在下面

我的网站页脚上有一个twitter/facebook的徽标

我的页面代码是：

<div class="layout-cell" style="width: 50%">
  <a href="https://www.facebook.com/pages/mysite/" target="_blank" class="facebook-tag-icon"></a>
  <a href="https://www.twitter.com/mysite" target="_blank" class="twitter-tag-icon"></a>
</div>

---

我希望我的fb图标显示在我的twitter图标的顶部，但它们目前显示在同一行，并排。。。我如何才能让它们彼此重叠显示？

添加

清除：两者都显示到twitter图标：


.facebook标签图标{
背景：url（'https://www.gravatar.com/avatar/87941b98d114974b269cd65f361b605b?s=32&d=identicon&r=PG&f=1“）无重复滚动；
最小高度：32px；
最小宽度：32px；
显示：块；
保证金：5px；
浮动：对；
}
.twitter标签图标{
背景：url（'https://www.gravatar.com/avatar/87941b98d114974b269cd65f361b605d?s=32&d=identicon&r=PG&f=1“）无重复滚动；
最小高度：32px；
最小宽度：32px；
显示：块；
保证金：5px；
浮动：对；
明确：两者皆有；
}


.facebook-tag-icon {
background:  url('mysite.co.uk/fb-off.png') no-repeat scroll;
min-height:32px;
min-width:32px;
display: block;
margin: 5px;
float: right;
}

.facebook-tag-icon:hover {
background:  url('http://mysite.co.uk/fb_on.png') no-repeat scroll;
}

.twitter-tag-icon {
background:  url('http://mysite.co.uk/twitter_off.png') no-repeat scroll;
min-height:32px;
min-width:32px;
display: block;
margin: 5px;
float: right;
}

.twitter-tag-icon:hover
{
background:  url('http://mysite.co.uk/twitter_on.png') no-repeat scroll;
}