最近做的一个项目经常会用到块级元素（block）浮动定位（float）的方式做的一个类似于BBS文章列表多行多列的布局方案。
我大概看了一下网上对于此种布局的布局办法，发现大多都是用表格来做的。连豆瓣、discuz的论坛也都是表格布局。
但是我对表格的布局有种敬而远之的畏惧感，一个是它的代码量很大，虽然用DW里添加表格的工具很快的添加，但是对于它的自适应元素的问题，我始终难以控制的行云流水。因此，我还是决定用css来做。
我选择用ul元素做列表框架，li元素做列表行，span元素做各列的容器的布局方式实现。
【css部分】
@charset "utf-8"; /* CSS Document */ ul li{margin:0; padding:0; list-style:none; font-size:12px; color:#333}/*初始化ul,li元素，让我们更方便使用*/ ul li{width:800px; height:35px; line-height:35px; border-bottom:1px dashed #ccc}/*定义高35像素的li元素，宽是布局的宽，还定义了一个虚线的下边框*/ ul li span{display:block; float:left; height:35px; line-height:35px;}/*定义span元素为块级元素，左浮动，高为li元素的高*/ /*分别定义需要的列span元素的宽度*/ ul li span.listOne{width:300px;} ul li span.listTwo{width:200px;} ul li span.listThr{width:100px;} ul li span.listFou{width:100px;} ul li span.listFiv{width:100px;}
【html部分】
<ul> <li> <span>帖子列表</span> <span>帖子分类</span> <span>发布者</span> <span>最后回复</span> <span>发布时间</span></li> <li> <span><a href="#">这里是帖子标题</a></span> <span><a href="#">这里是帖子分类</a></span> <span><a href="#">发布者姓名</a></span> <span>回复者姓名</span> <span>2009-10-10 20：10</span></li> </ul>
这样，如果在IE6+浏览器看的话，会是预想的两行5列的效果，没有任何问题。但是，如果在IE6下看，右侧会多出最后一列中的末字到下一行，如图所示
代码是没有任何问题的，因为在其他浏览器没有任何问题。所以那肯定是IE6的问题。
以前没有用过此种布局，因此并没有过处理此问题的经验。后来去往上搜了一下，往上大多都是出自同门师傅的答案，内容如下：
“1.是注释引起的,删除所有注释即可.
2.hidden的input直接放在form下.
3.display为none的div也有可能引发此bug.
2,3可以通过外面再包一次DIV解决”
另外有一篇很详细的解说，但是他是通过宽度的调整解决的我没有尝试，有兴趣的可以试一下，奉上地址如下：
《IE6/IE7文字溢出bug原因及解决办法》http://www.yarak.net.cn/default.asp?id=82
后来问了一下同事，他对此问题有过相应经验，不过他所知道的答案也是网上流传的方式。但是我的代码里并没有注释和以上类似的任何条件。
后经尝试，得出以下方案：
1、在span的父元素上定义溢出隐藏overflow：hidden;可以解决此问题。
2、span元素在html中书写时不进行换行（块级元素的特性）
3、span元素去掉浮动（float）并把显示方式改成display：inline-block
如此，溢出BUG问题解决
高手！专业！！
《IE6/IE7文字溢出bug原因及解决办法》http://www.yarak.net.cn/default.asp?id=82
感谢你的解答,我今天也遇到同样问题,去注释觉得应该就可以,但是我写了那么多注释,决定放弃此方法
搜到一个在 后面添加一个清楚浮动的 div 解决此问题
看到你说在外层包DIV
测试发现 多出两个字符需要 包两层…..
http://www.bluehost.com/index2.html
总结发现我直接省去了 ul li 两层,直接使用 ie 对如此的列表排列不怎么认识… 加上也好了.
我发现我写的标签没了..