<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.btn {position: absolute;height: 10px;width: 100px;top: 20px;left: 250px;}
.btn span{float:right;cursor:pointer;border: 1px solid #fff;width: 10px;height: 10px;border-radius: 10px;background: #333;margin-right: 5px;}
</style>
</head>
<body>
<div class="btn">
<span>
</span>
</div>
</body>
</html>
span是内联元素，宽度高度设置无效；而且在<span></span>，没有内容情况下当然不显示。
float不紧可以左浮动使其在一行显示，而且会转化为块级元素使得宽高设置生效
大致这个意思，可以看一下http://www.imooc.com/learn/121 张鑫旭关于浮动的深入讲解 5-3 float与display：block化，