CSS中的浮动布局方式有问解决方案

CSS中的浮动布局方式有问
最近初学css内容,学到浮动布局方式的时候,遇到了一个小问题,先将部分代码贴上,希望能够得到大家的帮助,谢谢!
下面是部分代码:
  <style type="text/css">
#kc_01 { float:left;}
</style>
<ul>
<div id="kc_01"><img src="kc01.jpg" /></div>
<div ><img src="kc11.jpg" /></div>
</ul>
假如这里用的是div标签,做出来的效果是图片kc01遮住了kc11这张图片;

<ul>
<li id="kc_01"><img src="kc01.jpg" /></li>
<li><img src="kc11.jpg" /></li>
</ul>
而用li标签的话,则是kc11这张图片紧跟着在kc01这张图片的右边

请问这是什么原因导致的呢,谢谢!!


[解决办法]

HTML code

 <style type="text/css">#kc_01 { float:left;}</style><ul><div id="kc_01"><img src="kc01.jpg" /></div><div ><img src="kc11.jpg" /></div></ul>
[解决办法]
你知道么 行内元素有个特性 它会围绕浮动元素  
所以你的img或者文字就会围绕在浮动元素的周围

你的代码我试过了 IETester以及FF等都会出现两张图片的

给你个例子 你自己看一下 会有一点帮助  
书上的东西你要自己敲一遍 有时候写的不完善 害死人

HTML code
<ul>        <div style="float:left;border:1px solid red;width:200px;height:200px;background-color:red;"></div>        <div style="border:1px solid blue;width:300px;height:200px;background-color:blue;">            <div style="border:1px solid yellow;width:250px;height:200px;background-color:yellow;"></div>        </div>    </ul>
[解决办法]
块元素就是占据整行的宽度 即使你定义了长宽 下面的元素还是会重起一行 如:div hr ul li form等
行内元素就是会在同一行内排列 如:span a strong em等

浮动元素后紧跟非浮动元素 在IE6下会有3px间隙 记得用margin-right:-3px让出空间 使非浮动元素左移 填补那点空白