html,css方面的问题
本帖最后由 liulinisgood 于 2012-12-03 11:10:20 编辑 第一段代码

<div>

   <ul style="list-style:none">

      <li style="float:left;width:50px; height:50px; ">

	     <img  src="qq.jpg"/>

	  </li>

	  <li style="width:50px; height:50px; ">

	     <img src="vs.jpg" />

	  </li>

	  <li style="width:50px; height:50px; ">

	    <img src="eclipse.jpg" />

	  </li>

   </ul>

</div>

效果图如下

第二段代码

<div>

   <ul style="list-style:none">

      <li style="float:left; ">

	     <img  src="qq.jpg"/>

	  </li>

	  <li >

	     <img src="vs.jpg" />

	  </li>

	  <li>

	    <img src="eclipse.jpg" />

	  </li>

   </ul>

</div>

效果图如下

第三段代码

<div>

   <ul style="list-style:none">

      <li style="float:left;width:50px; height:50px; background-color:#009966; ">

	     1

	  </li>

	  <li style="width:50px; height:50px; background-color:#339933; ">

	     2

	  </li>

	  <li style="width:50px; height:50px; background-color:#666666; ">

	    3

	  </li>

   </ul>

</div>

效果图如下

第四段代码
<div>
   <ul style="list-style:none">
      <li style="float:left;width:50px; height:50px; background-color:#009966; ">
     1
  </li>
  <li style="width:80px; height:80px; background-color:#339933; ">
     2
  </li>
  <li style="width:50px; height:50px; background-color:#666666; ">
    3
  </li>
   </ul>
</div>
效果图如下：
---------------------------------------------
提问：1.为什么不加宽度下一层的元素会和float：left的元素在一行。
      2.在第三个图的2和3数字会重叠在一起，为什么不像1图中直接覆盖。
大家可以具体解释每个图中的现象，第四个图中的数字2会被挤到数字1的右边。
------最佳解决方案--------------------
我是这样理解的：
       第一张图：ul，li都是块级元素，会独占一行，设置宽度以后，ul的宽度也是50px，float浮动属性虽然会影响下一个块级元素，但是因为两个li的宽度小于ul的宽度，所以显不出来；
       第二张图：宽度自适应，所以即不存在一图的问题；
       第三张图：这也是一个宽度不够的问题，这边之所以2和3重叠，其实是看浏览器的，估计你用的是firefox，浏览器之间显示是有差异的，在2的样式表里添加clear：left；就不会出现重叠问题了；
       第四张图：2不能说是被1挤到右边的，因为用了浮动属性，所以改变了2的块级元素，所以2合1显示在同一行，因为你的1设置了宽度，2当然从宽度后开始显示，怎么能叫挤呐。

------其他解决方案--------------------
多做几个案例，总结一下。
这个问题都不是什么问题，很简单的。

出现这种问题，基本都是浮动，宽度的问题。

继续加油。