关于cssfloat属性的继承


<style>li { float:left; width:100px;}
</style>
</head><body>
<ul id="nav">
 <li><a href="">文章</a>
  <ul>
   <li><a href="">CSS教程</a></li>
   <li><a href="">DOM教程</a></li>
   <li><a href="">XML教程</a></li>
   <li><a href="">FLASH教程</a></li>
  </ul>
 </li>
 <li><a href="">参考</a>
  <ul>
   <li><a href="">XHTML</a></li>
   <li><a href="">XML</a></li>
   <li><a href="">CSS</a></li>
  </ul>
 </li>
 <li><a href="">BLOG</a>
  <ul>
   <li><a href="">全部</a></li>
   <li><a href="">网页技术</a></li>
   <li><a href="">UI技术</a></li>
   <li><a href="">FLASH技术</a></li>
  </ul>
 </li>
</ul>
<ul>
 <li><a href="">摇滚</a></li>
 <li><a href="">纯音乐</a></li>
 <li><a href="">古典金曲</a></li>
 <li><a href="">电影原声</a></li>
</ul>不是说CSS的属性具有继承性吗？上例中对li这个标签设置了li { float:left; width:100px;}
只有外层li元素起作用，里面的li却没有起作用呢?

解决方案 »

  1.   

    在正常情况下，浏览器从HTML文件的开头开始，从头到尾依次呈现各个元素，块元素从上到下依次排列，内联元素在块元素内从左到右依次排列。而CSS的某些属性却能够改变这种呈现方式，这些属性就是这里要讲的，主要是float与position属性，另外还有clear属性以协助float，z-index属性协助position。这些属性值均无法继承。
    自问自答
    另外找人通俗解释下float这个属性，一直弄不明白。汗
      

  2.   

    我理解是，优先使用子元素字的样式，你那个<li>里面的<ul><li>被当成没有设置float，所有优先优先使用子元素字的样式不会float:left了。要不这样写吧。#nav li
    {
      //样式
    }
    #nav li ul
    {
      //样式
    }#nav li ul li
    {
      //样式
    }#nav li ul li a
    {
      //样式
    }