float可以改变行内元素的属性(案例检错）

• 首先看案例：这里想做出一个仿苏宁导航栏的案例，结构也非常简单，就是一个nav盒子里装10个图片，每个图片做成链接形式。

• 以下就是简要的html代码:
  
  我本来想的是 a设置长和宽 里面的img也修改长宽，子代中的img 由于是inline元素，必须得转换成block块级元素，才能设置自由的高度和宽度，并设置margin值。可是却出现了这种效果：a占据了整行的宽度，可是我明明给a设置了较小的宽度，为什么会出现这种效果呢？

• 后来知道了：每个div里面的子元素img转换成块级元素后，导致其所在的div只能一行排列一个。以至于a霸道的独占了一行，width充满整个浏览器的宽度。也就是图中的效果。那怎么消除这种巨丑的样式呢？
  
  重点来了：行内元素使用float属性后，也是将其属性变成inline-block，可以设置宽高，padding，margin属性。
  给nav 里的a 给定 float:left ，那么给定a的长和宽才生效了，a终于不是占据一行了。。。效果达成！
  
  如有错误，欢迎指出