css float浮动属性的深入研究及详解拓展(二)

接上回…css float浮动属性的深入研究及详解拓展(一)

浮动的本职工作是让匿名inline boxes性质的文字环绕图片显示，而其他所有用浮动实现的效果都不是浮动应该做的事情，我称之为“非本职工作”。

或许我们并没有过多的深思，把一些实际上不是浮动该干的事情当作“这必须用浮动来实现”。举个常见的例子，列表显示，见下面的图，截自淘宝新版首页：

我不看代码就知道是用浮动实现的，我用firebug一看，果然是，不仅浮动，而且定宽。ps:要是在几个月以前，我会觉得这实在有待改进，不过现在我的心态宽了，布局思想不同而已，没有孰对孰错之分。

我可以确信，浮动这个属性诞生的那天压根没有想到自己会要做这样的事情，本来它以为自己就让文字环绕显示就OK了，功德圆满了，结果，在web2.0的时代，其却在页面布局中被滥用。可能有人会反驳，你何处此言，有何证据？

我们只要静下心来好好想想浮动的本质，实现的原理，就可以知道为什么浮动本不应该用来对页面进行布局。还记得上一部分所说的浮动的本质吗？即“包裹与破坏”。我们可以用这个（“包裹与破坏”）解释为什么浮动可以让li这类block水平的元素水平排列。

单个无浮动的li元素

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表