[div+css]如何在适当的位置用clear关闭浮动float

HTML code

                <div class='item'>
            <span>数据</span>
            <span>数据</span>
            <span>数据</span>
            <span>数据</span>
            <span>数据</span>
            <span>数据</span>
            <span>数据</span>
            <span>信数据</span>
         </div>
                 <div class='item'>
                     ...其他内容
                 </div>

我想实现的效果：
一个DIV有边框的，里面有多个数据块；没有设置高度的。
多个文字数据显示在同一行，但是不同的数据块宽度不一样。于是我设置了span的效果display:block;width:**px;

问题：
这样造成一个问题，这个DIV里的那么多float没有关闭，在IE下感觉不出差别来。
但是在火狐下，发现DIV的高度只显示出2px；就是只能看到2条边框线，
而里面的span内容位移到DIV第一top边框下面来了，脱离了DIV，没有被DIV套住。
很显然，因为没有关闭float。

我的解决办法：
在float标签最后再加一个标签，设置CSS：clear:both；这样在火狐下就能正常显示了。

HTML code

   <div>
     .......主要内容
     <span style='clear:both'></span>
   </div>

我要问的是：
你们是如何解决这个问题的。方法是这样吗？还有其他更好的方法没有？

------解决方案--------------------
以前的帖子我是这样说的~
经试验，还可以这样： 
<div style=" float:left; background-color:#00ff00;"> 
<div style="float:left; background-color:#ff0000; height:250px; width:200px;">此处显示新 Div 标签的 </div> 
<div style="float:right;background-color:#0000ff; height:450px; width:200px;">此处显示新 Div 标签的内容 </div> 
</div> 
我来说原理~ 
应该父容器没有浮动，而子容器浮动了 
所以子容器就浮出了父容器 所以在父容器上加上float后 
子容器就在父容器内浮动了 

另外方法 
<div style=" overflow:auto;_height:1%; background-color:#00ff00;"> 
<div style="float:left; background-color:#ff0000; height:250px; width:200px;">此处显示新 Div 标签的 </div> 
<div style="float:right;background-color:#0000ff; height:450px; width:200px;">此处显示新 Div 标签的内容 </div> 
</div>
------解决方案--------------------

HTML code

你代码写的有问题.DIV+CSS并非让你烂用DIV.合理的布局才是硬道理.
看你上面代码所描述的.可以使用下面我的方法
<ul id="menu">
 <li><a>数据</a></li>
 <li><a>数据</a></li>
 .....
 <li class="item"></li>
</ul>