接上回…css float浮动属性的深入研究及详解拓展(一)
五、浮动的非本职工作浮动的本职工作是让匿名inline boxes性质的文字环绕图片显示，而其他所有用浮动实现的效果都不是浮动应该做的事情，我称之为“非本职工作”。
或许我们并没有过多的深思，把一些实际上不是浮动该干的事情当作“这必须用浮动来实现”。举个常见的例子，列表显示，见下面的图，截自淘宝新版首页：
我不看代码就知道是用浮动实现的，我用firebug一看，果然是，不仅浮动，而且定宽。ps:要是在几个月以前，我会觉得这实在有待改进，不过现在我的心态宽了，布局思想不同而已，没有孰对孰错之分。
我可以确信，浮动这个属性诞生的那天压根没有想到自己会要做这样的事情，本来它以为自己就让文字环绕显示就OK了，功德圆满了，结果，在web2.0的时代，其却在页面布局中被滥用。可能有人会反驳，你何处此言，有何证据？
我们只要静下心来好好想想浮动的本质，实现的原理，就可以知道为什么浮动本不应该用来对页面进行布局。还记得上一部分所说的浮动的本质吗？即“包裹与破坏”。我们可以用这个（“包裹与破坏”）解释为什么浮动可以让li这类block水平的元素水平排列。
单个无浮动的li元素
看下面的HTML代码：这里的li元素为什么会有高度？如果您认真读过前半部分内容关于line boxes模型与高度的关系的内容，应该知道，由于图片没有应用float属性，其本身有一个正常的inline box，这个inline box高度等于图片的height，在这行元素中，图片这个inline box的高度最高，于是传递给了line box，line box是个真正意义上的高度，直接作用于containing box（就是这里的li元素，使li元素有一个高度）。理解了这个您就会明白为什么要是这里的图片添加了float属性，li高度会塌陷了：浮动破坏了inline box。这个后面会详细讲解。
这里的li没有添加float属性，可以见到li宽度100%自适应于父ul标签。一切显得那么的和谐！
单个左浮动的li元素
看下面的HTML代码：相比上面而言，这里多了个float:left;，浮动的“包裹性”一目了然：水平方向上，li宽度紧贴内部元素。我在css float浮动属性的深入研究及详解拓展(一)曾说过这么句结论性的话：“撇开浮动的‘破坏性’，浮动就是个带有方位的display:inline-block属性”。这不难理解，您可以讲这里的float:left;改成display:inline-block;最后实现的效果基本上就是一样的。display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。所谓对象呈递为内敛对象就是元素呈递为inline box，所以浮动“包裹性”所产生的结果就是使得元素转为了line box模型中的inline box元素。
浮动的“包裹性”让元素变成类似于inline box的元素，而浮动的“破坏性”正是破坏inline box元素的，这其中岂不有矛盾。其实非也，对于block水平的这类块状元素需要先让其变成类似效果的内联元素，然后再破坏之，实乃先诱拐再奸杀的生动实例啊！
又是我反复提到的，浮动破坏了inline box，也就是破坏了高度，所以这里含有浮动属性的li元素实际上是没有高度的。所以呢，要是后面还有同样的li标签的话，就会水平对齐排列的。如下：
多个左浮动的li元素
看下面的HTML代码：左浮动的li元素和无浮动的li元素
看下面的HTML代码：后面一个li无float属性，直接无视前面的float li元素，宽度100%显示，而且与float属性的li同一水平线排列，为何？因为浮动破坏了li的实际高度（原因我讲得太多次了），只是图片是个实体，无法与同样实体的同一文档流的图片重合，所以图片靠在一起。
六、证据1. 首要证据
css float浮动属性的深入研究及详解拓展(一)是着重分析了浮动的“本职工作”：文字环绕显示；本文着重分析了浮动的“非本职工作”：列表布局；两者都是用的同样的原理解释的，那么有什么证据可以证明“页面布局”不是浮动的“本职工作”呢。答案关键字就是：高度塌陷。
我在多个地方浓墨重彩的讲浮动与高度的关系，浮动使高度塌陷的原因，自己都觉得唠叨的太多了，这里不再讲。直接讲些实际的东西。
您是否发现，浮动布局会让父标签高度缺失，但是实现文字环绕图片效果的时候父标签无需清除浮动。还是上面的例子，我们看看多li元素浮动时ul标签高度在哪里，我们可以给ul加个边框属性做测试，测试代码如下：
<li style="border:4px solid #ff6633; background:#ffffc0; float:left;"><img src="../image/bo