css之float的深入理解

1. 浮动

分栏和列表排列都可以用其他css属性替换,但文字环绕图片是没有办法的,而这里就是浮动应该出现的地方.浮动的意义就是让文字环绕图片而已.

2. 浮动的本质

包裹与破坏

浮动的包裹性(包裹是让标签占据的空间水平收缩)

包裹可以用inline-block来实现,一种按钮的实现方式,外层居左,里层居右,背景图片可以很长,这样只显示一部分.如下

.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;}

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

可以用float:left实现,只不过是把外层的btn1,换成float:left;即可.

所以类似于display:block,float:left,的代码95%都是没有道理的

唯一可用的可能就是右浮动,这样inline-block是没有

浮动的破坏性(破坏是破坏的inline box)

文字只所以会包含有float属性的图片,是因为float破坏了正常的lline boxes

<p>这是一行普通的文字，这里有个 <em>em</em> 标签。</p>

p标签所在的container box包含了其他boxes,一个个inlinebox组成了linebox

包含了匿名inline-box和inline-box,span,a,cite等都是显式inline-box

content  area是围绕文字看不到的box,其大小跟font-size相关

刚才说过，正常情况下，图片自身就是个inline boxes，与两侧的文字inline boxes共同组成了line boxes，但是，一旦图片加入了浮动，情况就完全变了。我认为是浮动彻底破坏了img图片的inline boxes特性，至少有一点我可以肯定，图片的inline boxes不存在了，被恶魔附体，变身了，而这个恶魔就是浮动。一旦图片失去了inline boxes特性就无法与inline boxes的文字排在一行了，其会从line boxes上脱离出来，跟随自身的方位属性，靠边排列。这种状态跟限制性内切酶起作用几乎一致，一条基因链上(line boxes)有很多的基因(inline boxes)，然后限制性内切酶(float)会切除特定的DNA序列，此序列(float元素)就会从基因链上脱离出来。

在目前的CSS的世界中，所有的高度都是有两个CSS模型产生的，一个是box盒状模型，对应CSS为”height+padding+margin”，另外一个是line box模型，对应样式为”line-height”。前者的height属性分为明显的height值和隐藏的height值，所谓隐藏的height值是指图片的高度，一旦载入一张图片，其内在的height值就会起作用，即使您看不到”height”这个词。而后者针对于文字等这类inline boxes的元素（图片也属于inline boxes，但其height比line-height作用更凶猛，故其inline boxes高度等于其自身高度，对line-height无反应），inline boxes的高度直接受line-height控制（改变line-height文字拉开或重叠就是这个原因），而真正的高度表现则是由每行众多的inline boxes组成的line boxes（等于内部最高的inline box的高度），而这些line boxes的高度垂直堆叠形成了containing box的高度，也就是我们见到的div或是p标签之类的高度了。所以，对于line box模型的元素而言，没有inline boxes，就没有高度了，而浮动却恰恰做了这么龌龊的事情，其直接将元素的inline boxes也破坏了，于是这些元素也就没有了高度。

撇开浮动的‘破坏性’，浮动就是个带有方位的display:inline-block属性,跟absolute的区别就是是否覆盖的问题

3. 浮动的非本职工作

让匿名inlinebox的文字环绕图片显示

4. 浮动是魔鬼

理论上而言，除了浮动的环绕效果之外，我们使用浮动做的其他工作都可以使用别的CSS属性实现，而且大部分情况是比浮动的效果好：首先没有了清楚浮动一说，二是有关浮动的一堆bug也不会出现，三是元素间独立了，不会像浮动一样改变一个会影响其他。但是，考虑到大多数人对CSS掌握的程度，以及浏览器的一些兼容性问题等，很多时候，我们不得不使用看上去使用方面但潜在问题较大的浮动属性。所以，有关浮动的一些特性的研究还是很有必要的，这就是下面的重点。

5. 清除浮动的方法

IE下清除浮动准则很简单，使元素haslayout就可以了。如宽度值，高度值，绝对定位，zoom，浮动本身都可以让元素haslayout。显然，首选zoom:1;不会干扰任何样式。非IE浏览器常用的是overflow属性，overflow:hidden;或是overflow:scroll都可以，不过由于后者经常一不小心出现滚动条，所以前者用的更多些。由于现代浏览器都支持after伪类伪元素，所以常常也会用after写入一个clear属性的元素清除浮动。当然，最投机取巧的方法就是直接一个<div style="clear:both;"></div>放到当作最后一个子标签放到父标签那儿。下面小结这几个方法。

div clear:both  这种方法容易产生空白高度

flow:hidden, zoom:1,margin 负值或者负的绝对定位时容易有问题

after+zoom的方法最是通用,比较推荐

6. float 与javascript

IE浏览器：

obj.style.styleFloat = "left";

其他浏览器：

obj.style.cssFloat = "left";