Float 的那些事

css float

定义元素浮动到左侧或者右侧。其出现的本意是让文字环绕图片而已。

left、right、inherit（从父级元素获取float值）、none

一、浮动的性质

1. 包裹性

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

　　浮动属性（无论是左浮动还是右浮动）某种意义上而言与display:inline-block属性的作用是一模一样的

　　区别：浮动的方向性

　　display:inline-block仅仅一个水平排列方向，就是从左往右，而float可以从右往左排列

2. 破坏性

　　2.1 float元素不占据正常文档流空间

　　　　由于浮动块不在文档的普通流中，所以文档的普通流中的块表现得就像浮动块不存在一样。

　　　　3块div均未加float

　　　　

　　　　块1享有浮动，脱离文档流并且向右移动

　　　　

　　　　　块1向左浮动。IE8和Firefox中因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了块2，使块2从视图中消失。而IE6和IE7中紧跟在浮动元素块1的块2也会跟着浮动。如下图

　　　　　

　　　　　

　　2.2 浮动“塌陷”

　　　　对父元素的影响：如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零。

　　　　

　　　　此类情况出现原因

　　　　浮动的“本职工作”：文字环绕显示；“非本职工作”：列表布局；证据：高度塌陷

　　　　所以浮动元素塌陷的问题根本就不是浏览器的bug，而是我们没有正确地深入地了解浮动，是我们自己使用不当，因为浮动本不应该用在这里的。

　　　　

　　　　解决方案

　　　　① 在使用float元素的父元素结束前加一个高为0宽为0且有clear:both样式的div

　　　　

<div>
    <div><span>块1</span> float:left </div>
    <div><span>块2</span> float:left</div>
    <div><span>块3</span> float:left</div>
    <div></div>
</div>

　　　　② 在使用float元素的父元素添加overflow:hidden;

　　　　③ 使用after伪对象清除浮动

3. float与JavaScript

　　使用JavaScript设置float不能使用 obj.style.float="left";

　　IE：

obj.style.styleFloat = "left";

　　其他浏览器：

obj.style.cssFloat = "left";

推荐参考 文一    文二