在css中用列表设置导航条时block在a标签中的作用

前段时间学习用列表制作导航条时有一个在a标签中display:block;的设置不太理解，今天终于想通了。

要理解这一个，首先要知道float的特性之一，包裹性。对于块级元素，默认的宽度为100%。例如在div中有一个img标签，那么无论img实际的宽度如何，div占据的宽度始终是100%。但是当div被设置为float:left;时，便具有了包裹性，即根据内部的内容自动修改宽度。

如图：（来自：http://www.jianshu.com/p/07eb19957991)

在制作导航条时，往往要设置（部分代码）:

li{    display:inline;    float:left;    /*还可设置宽度，高度(line-height)*/ }a{    background-color:gray;    display:block;}

---

在a中，通过display:block;将a变为一个块级元素，这样背景颜色不会只占据a中可点击区域那一小块部分：

（上图中为不是块级元素时a的背景颜色，只占据了一小部分）

那么占据的是什么部分呢？是被设置了float属性的li包裹的部分，也就是整个a的块级部分：

那么这里的几个属性就很清楚了。a中的block使得背景颜色充满整个li部分，而把li设置为浮动正是利用了float的包裹性，即紧紧的包裹住内容（此处为被设置为块级元素的a）。

注意：此处的inline和float可以合并为一个inline-block。
详情点击：http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/