1.这里用了span标签来布局。span是行内元素，因为要设置它宽高，所以就把它变成了行内块元素。
2.display为inline-block的元素在水平方向上之间会有间隙因为换行和空格的影响；所以我在结构那里没有换行。
3.我不想给父级元素设置宽高，想让内容撑开盒子，所以要清除浮动。用了clear: both;
4.父级元素没有宽高，但是又想盒子居中，所以加了text-align: center;行内元素或者行内块元素水平居中给其父级元素添加text-align: center;
下面是网上找到的一些方法。
第一种，如果有固定的宽高。用一个和所有浮动盒子等宽的大盒子包裹起来，然后设置大盒子的margin:0 auto;就可以水平居中。需要注意大盒子的宽除了要包括里面盒子的总宽外还要包括每个盒子的外边距，内填充，边框等。还有大盒子里面所有元素浮动之后，大盒子的高度消失的问题。
第二种，使用绝对或相对定位。还是用一个大盒子包裹起来，大盒子的position设置成absolute或者relative，然后大盒子的left为50%，margin-left设置为负的大盒子宽度的一半，这也需要知道大盒子的宽度。
第三种，不需要设置任何宽度。所有盒子不使用浮动，而使用display:inline-block;来使盒子在一行显示，然后设置父元素的text-align:center;来使子元素居中。父元素需要占整个一行，并且每个盒