CSSfloat浮动的深入研究详解及拓展(二).doc

CSS float浮动的深入研究、详解及拓展(二) by zhangxinxu from 本文地址：/wordpress/?p=594 接上回… 五、浮动的非本职工作 浮动的本职工作是让匿名inline boxes性质的文字环绕图片显示，而其他所有用浮动实现的效果都不是浮动应该做的事情，我称之为“非本职工作”。 或许我们并没有过多的深思，把一些实际上不是浮动该干的事情当作“这必须用浮动来实现”。举个常见的例子，列表显示，见下面的图，截自淘宝新版首页：我不看代码就知道是用浮动实现的，我用firebug一看，果然是，不仅浮动，而且定宽。ps:要是在几个月以前，我会觉得这实在有待改进，不过现在我的心态宽了，布局思想不同而已，没有孰对孰错之分。 我可以确信，浮动这个属性诞生的那天压根没有想到自己会要做这样的事情，本来它以为自己就让文字环绕显示就OK了，功德圆满了，结果，在web2.0的时代，其却在页面布局中被滥用。可能有人会反驳，你何处此言，有何证据？ 我们只要静下心来好好想想浮动的本质，实现的原理，就可以知道为什么浮动本不应该用来对页面进行布局。还记得上一部分所说的浮动的本质吗？即“包裹与破坏”。我们可以用这个（“包裹与破坏”）解释为什么浮动可以让li这类block水平的元素水平排列。 单个无浮动的li元素 看下面的HTML代码： ul style=width:440px; li style=border:4px solid #ff6633; background:#ffffc0;img src=../image/border.png //li /ul 结果如下图（截自Firefox浏览器，无其他样式干扰，下同）： 这里的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代码： ul style=width:440px; li style=border:4px solid #ff6633; background:#ffffc0; float:left;img src=../image/border.png //li /ul 结果如下图： 相比上面而言，这里多了个float:left;，浮动的“包裹性”一目了然：水平方向上，li宽度紧贴内部元素。我在前文曾说过这么句结论性的话：“撇开浮动的‘破坏性’，浮动就是个带有方位的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代码： ul style=width:440px; 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 /