CSS <a>标签选择差异

前端开发自学中碰到的问题：

以下是这段HTML代码，在选取<a>标签时，两种不同的方法结果不同

<div class = "topleft">

<img src = "images/logo.png" />
<input class = "topinput" type = "text" value = "菜谱、食材"/>
<a href = "#">搜索</a>
<ul class = "toplist">
<li>首页</li>
<li>菜谱分类</li>
<li>菜单</li>
<li>作品动态</li>
<li>App</li>
</ul>

</div>

第1种选取方法CSS：

.topleft a{float:left;width:60px;margin-right:16px;height:38px;line-height:38px;text-align:center;background:#b24422;color:#fff;}

左边红框内的li保持纵向排列

第2种选取方法CSS：

.topleft img,input,a,ul{float:left;}

则红框内li堆积到一起了。