<li style=”border:4px solid #ff6633; background:#ffffc0; float:left;”><img src=”../image/border.png” /></li>
<li style=”border:4px solid #ff6633; background:#ffffc0;”><img src=”../image/border.png” /></li>
</ul>
结果如下图：
后面一个li无float属性，直接无视前面的float li元素，宽度100%显示，而且与float属性的li同一水平线排列，为何？因为浮动破坏了li的实际高度（原因我讲得太多次了），只是图片是个实体，无法与同样实体的同一文档流的图片重合，所以图片靠在一起。
六、证据
1. 首要证据
css float浮动属性的深入研究及详解拓展(一)是着重分析了浮动的“本职工作”：文字环绕显示；本文着重分析了浮动的“非本职工作”：列表布局；两者都是用的同样的原理解释的，那么有什么证据可以证明“页面布局”不是浮动的“本职工作”呢。答案关键字就是：高度塌陷。
我在多个地方浓墨重彩的讲浮动与高度的关系，浮动使高度塌陷的原因，自己都觉得唠叨的太多了，这里不再讲。直接讲些实际的东西。
您是否发现，浮动布局会让父标签高度缺失，但是实现文字环绕图片效果的时候父标签无需清除浮动。还是上面的例子，我们看看多li元素浮动时ul标签高度在哪里，我们可以给ul加个边框属性做测试，测试代码如下：
复制代码
<ul style=”width:440px; border-top:4px solid #a0b3d6; border-bottom:4px solid #34538b;”>
<li style=”border:4px solid #ff6633; background:#ffffc0; float:left;”><img src=”../image/border.png” /></li>
<li style=”border:4px solid #ff6633; background:#ffffc0; float:left;”><img src=”../image/border.png” /></li>
</ul>
结果如下图：
上图显示ul高度为0，这是必然的，正常的，应该的。您要是在IE下看到ul有高度，认为这是Firefox等浏览器有问题就错了，您把ul的width属性去掉，看看，会发现IE下ul高度也为0， 这是IE的layout作祟。至于为什么ul高度为0，我前面很多地方都已经讲了，不再说了。但是，从中我们可以看到，浮动本不是用来列表布局的，而是用来使元素环绕显示的，因为元素环绕（例如文字），其自身是含有inline boxes高度的，这是inline水平的元素形成高度的基础，所以，虽然浮动元素没有高度，但是其周围环绕的元素是有高度的，只要环绕元素比浮动元素高度高，父标签无高度的问题自然也就没有了，但是纯粹一堆浮动元素会有高度吗？没有。所以浮动元素塌陷的问题根本就不是浏览器的bug，而是我们没有正确地深入地了解浮动，是我们自己使用不当，因为浮动本不应该用在这里的。
