Html 浮动要素问题

我读了一些关于浮动元素的文章，但我有一些问题需要理解如何浮动项目的以下部分。你能给我一些关于代码结构的建议或解释吗？我有一个UL和几个LI项目，在我的LI项目中，我有一个带类的标记+Span，我试图将A标记浮动到左侧，将Span浮动到右侧，但当我将Span浮动到右侧时，它将位于内容后面。。我不知道跨度到底在哪里“躲着我”。。。箭头应在测试结束时浮动。li div不在外部

.widgets{list style:none；float:left；}
.widget title{background:url（../images/sidebar.jpg）0 0无重复；宽度：189px；清除：两者；}
.widget title h3{字体系列：“Georgia”，衬线；字体大小：14px；字体重量：正常；颜色：#333329；文本转换：大写；填充：2px 10px；}
.widget{margin bottom:39px；}
.widget ul{列表样式：无；}
.widget ul{行高：29px；页边距顶部：1px；}
.widget ul li a{位置：相对；文本装饰：无；字体大小：12px；颜色：#666651；填充：0 10px 0 11px；}
.widget ul li a:在{内容：''之后；位置：绝对；顶部：25px；左侧：10px；宽度：171px；高度：1px；框阴影：0px 1px 1px#ededde，0px 1px 1px#edde；不透明度：0.5；}
.ul li a:hover{color:#46462b；}
.test{溢出：隐藏；}
.test ul{float:right；}
.btn箭头{背景：url(https://s12.postimg.org/9olm50ogt/sidebar_arrow.png)0 0不重复；宽度：11px；填充：0 8px；浮点：右；}

类别

由于使用图像作为背景，元素不知道要跟随的高度，因此得到0。所以，如果在.btn箭头上加上height:14px，它应该可以工作。查看上面的代码：

.widgets{list style:none；float:left；}
.widget title{background:url（../images/sidebar.jpg）0 0无重复；宽度：189px；清除：两者；}
.widget title h3{字体系列：“Georgia”，衬线；字体大小：14px；字体重量：正常；颜色：#333329；文本转换：大写；填充：2px 10px；}
.widget{margin bottom:39px；}
.widget ul{列表样式：无；}
.widget ul{行高：29px；页边距顶部：1px；}
.widget ul li a{位置：相对；文本装饰：无；字体大小：12px；颜色：#666651；填充：0 10px 0 11px；}
.widget ul li a:在{内容：''之后；位置：绝对；顶部：25px；左侧：10px；宽度：171px；高度：1px；框阴影：0px 1px 1px#ededde，0px 1px 1px#edde；不透明度：0.5；}
.ul li a:hover{color:#46462b；}
.test{溢出：隐藏；}
.test ul{float:right；}
.btn箭头{背景：url(https://s12.postimg.org/9olm50ogt/sidebar_arrow.png)0 0不重复；宽度：11px；填充：0 8px；浮动：右；高度：14px；}

类别

我想你错过了.btn箭头的高度