导航栏中 li a strong span相关问题

Question

导航栏中a strong span 跟着li 一起浮动，一起加上height 就可以直接当做块来用吗
麻烦解释一下

---

这里是CSS代码 ：

#nav{                            //导航栏直接用ul来做,不用多余的div
    width: 960px;                //
    height: 36px;
    margin: 0 auto;
    padding-top: 8px;
}

#nav li {
    float: left;            
    height: 28px;
    margin-right: 2px;
}
#nav a {
    float: left;                //li用了浮动，后面跟的a strong span都要浮动
    height: 28px;                //高度也要加上
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    line-height: 28px;
    cursor: pointer;
}
#nav strong {
    float: left;
    height: 28px;
    font-weight: normal;

}
#nav span {
    float: left;
    height: 28px;
    padding: 0 16px;
}

#nav a:hover, #nav .active a{
    background: url(../images/nav_active_bg.png) repeat-x 0 -56px;
}
#nav a:hover strong, #nav .active strong{
    background: url(../images/nav_active_bg.png) no-repeat;
}
#nav a:hover span, #nav .active span{
    background: url(../images/nav_active_bg.png) no-repeat right -28px;
}

---

这里是HTML：

<ul id="nav">
            <li class="active"><a href="#"><strong><span>HOME</span></strong></a></li>
            <li><a href="#"><strong><span>LATEST ARRIVALS</span></strong></a></li>
            <li><a href="#"><strong><span>MEN'S</span></strong></a></li>
            <li><a href="#"><strong><span>WOMEN'S</span></strong></a></li>
            <li><a href="#"><strong><span>KIDS</span></strong></a></li>
            <li><a href="#"><strong><span>BRANDS</span></strong></a></li>
            <li><a href="#"><strong><span>SALE</span></strong></a></li>
            <li><a href="#"><strong><span>GIFT CARDS</span></strong></a></li>
            <li><a href="#"><strong><span>FREEBIES</span></strong></a></li>
        </ul>

Answer 1

是的，根据 w3c 的规定：当元素 display 属性不为 "none" 且浮动时，该元素的 display 属性就会变成 block。具体规定如下（点击查看）：

Answer 2

简单的理解，你可以认为float具有将行内元素转化为块级元素的作用(不严谨，但是很好理解)