Html WordPress文本小部件中的按钮赢得'；不能正常工作

我试图制作两个按钮来过滤博客中的一个类别，并将它们放在我网站的侧栏中。因此，我将整个代码、样式和html放入一个小部件中。它们是带有图像和悬停的简单链接。 但不知何故，按钮出现在侧边栏中下一个小部件的标题栏中

代码如下：

<style>
a.filtro{
display:block;
width: 100px;
height: 100px;
float: left;
margin: 5px ;
background: url("http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro-02.png");
background-size:cover;
}

a.filtro:hover{
background: url("http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro_sel-02.png");
background-size:cover;
}

a.filtro2{
display:block;
width: 100px;
height: 100px;
float: left;
margin:5px;
background: url("http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro-03.png");
background-size:cover;
}


a.filtro2:hover{
background: url("http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro_sel-03.png");
background-size:cover;
}
</style>


<a href="http://www.tk.gvdgvd.net/?cat=25" class="filtro"></a>

<a href="http://www.tk.gvdgvd.net/?cat=10" class="filtro2">
</a>

a、 菲尔特罗{
显示：块；
宽度：100px；
高度：100px；
浮动：左；
保证金：5px；
背景：url（“http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro-02.png");
背景尺寸：封面；
}
a、 filtro:悬停{
背景：url（“http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro_sel-02.png");
背景尺寸：封面；
}
a、 过滤器2{
显示：块；
宽度：100px；
高度：100px；
浮动：左；
保证金：5px；
背景：url（“http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro-03.png");
背景尺寸：封面；
}
a、 过滤器2：悬停{
背景：url（“http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro_sel-03.png");
背景尺寸：封面；
}

我在css中尝试了很多东西，但我无法修复它，但它仍然是一种非常奇怪的行为。

---

我猜新代码正在覆盖style.css中的某些内容，但我不知道是什么。

尝试在以下类中添加浮点：

.main .sidebar .widget {
    float: left; //added float here
    margin-bottom: 35px;
}

当您在另一个div中浮动div时，您需要浮动父div，或者在上一个浮动元素下面放置一个div“clear”，如下所示：

<a href="http://www.tk.gvdgvd.net/?cat=10" class="filtro2"></a>
<div style="clear: both;"></div>

---

否则你会得到你现在看到的溢出效应。

谢谢佩德罗！我试了第二种，效果很好。同时也感谢你的解释，如果我有足够的声誉，我会投票支持你的答案。还有，回答得好，佩德罗。非常清楚和简洁。