滑动门的那些事

I am bug(重构网站，重构人生)http://www.aiubug.com/?cat=20

1. 浮动的“包裹性”
先说句您应该没有见过的结论：撇开浮动的“破坏性”，浮动就是个带有方位的display:inline-block属性。

display:inline-block某种意义上的作用就是包裹(wrap)，而浮动也有类似的效果。举个常见例子，或许您有实现宽度自适应按钮的经验，实现宽度自适应的关键就是要让按钮的大小自适应于文字的个数，这就需要按钮要自动包裹在文字的外面。我们用什么方法实现呢？一就是display:inline-block；二就是float。例如我们要实现新浪博客中的“发表文章”之类的宽度自适应按钮（如下图）:

背景图片为：

display:inline-block方法

CSS代码如下：

.btn1{display:inline-block; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat left top; padding-left:3px; color:#000000; font-size:12px; text-decoration:none;}
.btn1 cite{display:block; line-height:26px; padding:0 13px 0 10px; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat right top;}

HTML代码如下：

<a href="javascript:void(0);" class="btn1"><cite>inline-block方法</cite></a>

结果如下图：

float:left方法
此方法的CSS代码与上面的inline-block方法唯一不同之处就在于这里是float:left;

CSS代码如下：

.btn1{float:left; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat left top; padding-left:3px; color:#000000; font-size:12px; text-decoration:none;}
.btn1 cite{display:block; line-height:26px; padding:0 13px 0 10px; background:url(http://www.zhangxinxu.com/study/image/sina_gray_btn.png) no-repeat right top;}

HTML代码如下：

<a href="javascript:void(0);" class="btn1"><cite>float方法</cite></a>

结果如下图：

您可以狠狠地点击这里：按钮宽度自适应demo

上面这个例子旨在说明浮动属性（无论是左浮动还是右浮动）某种意义上而言与display:inline-block属性的作用是一模一样的，所以类似于display:block; float:left;的CSS代码超过95%的情况是没有道理的(display:block是多余的)。然而，float无法等同于display:inline-block，其中原因之一就是浮动的方向性，display:inline-block仅仅一个水平排列方向，就是从左往右，而float可以从右往左排列，这就是两者的差异。然而，我们又有多少情况需要元素从右往左排列呢？很少，所以，CSS中，没有浮动这一属性不是什么大不了的事情，它其实就那么回事。

截至

CSS float浮动的深入研究、详解及拓展(一)