float浮动理解总结

这篇文章是我在看了张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]中的博客基础上总结而来的。

浮动出现的意义只是用来让文字环绕图片。而其他用浮动实现的页面布局不是浮动该干的事情。

浮动的本质：包裹于破坏

1.浮动的”包裹性“
撇开浮动的”破坏性“，浮动就是个带有方位的display:inline-block属性。
display:inline-block在某种意义上的作用就是包裹，浮动也有类似的效果。比如说：要实现宽度自适应的按钮，关键就是让按钮的大小自适应文字的个数，这就需要按钮要自动包裹在文字的外面。实现的方法有两种：一是用display:inline-block,二是：float。
float与display:inline-block的区别：其中之一是浮动的方向性，display:inline-block仅仅是一个水平排列的方向，从左到右，而float可以从右到左。但是很少有使用从右到左的情况，所以,css中，浮动这一属性可以说重要也可以说不重要。
2.浮动的"破坏性"
浮动可以说是css中的“破坏之王”。要理解浮动的破坏性，首先从浮动的原始意义入手：只是用来让蚊子环绕图片，仅此而已。
文字之所以会环绕float属性的图片是因为浮动破坏了正常的line boxes.
line boxes模型我之前已经总结过了，这里就不在详细介绍了。

浮动的非本职工作

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

查看源代码：发现是用浮动实现的。

其实从浮动产生的最初原因来看，浮动本不应该用来对页面进行布局。float是如何让li这类block水平的元素水平排列的呢。来看下面的例子。

单个无浮动的li元素

HTML代码：

<ul style="width:440px;">    <li style="border:4px solid #ff6633; background:#ffffc0;"><img src="../image/border.png" /></li></ul>

结果如下图：

这里的li元素为什么会有高度呢？由于图片没有应用float属性，其本身有一个正常的inline boxes,这个inline boxes高度等于图片的height,在这行元素中，图片这个inline boxes的高度最高，所以传给了line box,line box是真正意义上的高度，直接作用于containing box(就是这里的li 元素，是li元素有一个高度)。那么如果这里的图片添加了float属性，li高度就会塌陷：浮动迫害了inline box。

单个左浮动的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宽度紧贴内部元素。这里也可以将float:left改为display:inline-block;最后实现的效果基本上是一样的。display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递，所谓对象呈递为内联对象就是元素呈递为inline box,所以元素的包裹性所产生的结果就是使得元素转为了line box 模型中的inline box元素。

浮动的包裹性让元素变成类似于inline box元素，而浮动的破坏性正是破坏inline box,这看起来是矛盾的。但是，其实对于block水平的这类块状元素需要先让其变成类似效果的内联元素，然后再破坏。（我理解的是浮动让自己变成了inline box,但是破坏了父元素的line 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" /></li></ul>

结果如下图

左浮动的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;"><img src="../image/border.png" /></li></ul>

结果如下图：

后面一个li无float属性，宽度100%显示（这里就涉及到了浮动产生的包裹性）。但是这个li与float属性的li同一水平排列，为何？浮动破坏了li的实际高度，只是因为图片是个实体，浮动属性的元素也属于文档流，所以这里的图片无法与前面float属性的li元素的图片（它们两个属于同一文档流）重合，所以两个图片靠在一起显示。

浮动对父元素的影响

前面介绍的浮动的本职工作：“文字环绕显示”和非本质工作：“列表布局”；两者都是用同样的原理实现的，用“高度塌陷”可以证明“页面布局”不是浮动的本职工作。高度塌陷前面我也已经了解过了。

经过测试发现，浮动布局会让父标签高度缺失，但是实现文字环绕图片效果的时候父标签无需清除浮动，下面来看看前面的例子中li元素浮动时ul标签的高度在哪里。给ul加个边框试试：

<ul style="width:440px; border-top:4px solid #a0b3d6; border-bottom:4px solid #34538b;">    <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" /></li></ul>

结果如下图：

上面ul的高度为0,从中可以看出，浮动本不是用来列表布局的，而是用来使元素环绕显示的，因为元素（自身是有inline box高度的）环绕，这是inline水平的元素形成高度的基础，所以，虽然浮动元素没有高度，但是其周围的元素又高度，只要环绕元素比浮动元素高，父标点自然便有了高度，但是纯粹一堆浮动元素就会造成高度塌陷，致使父元素无高度。

浮动的存在就是个破坏

浮动的效果就是先破坏自身，然后影响别人。页面中只要一出现浮动，势必有其他元素会受到影响，浮动只是让文子环绕图片显示而已，所以其必须破坏自身模型和高度。但是浮动这种置之死地而后生的特性可以让元素布局，由于其表面意思很好理解和其兼容性，于是在舍弃了table布局的web时代里，浮动成为当前页面布局的主流，其实这也是一件很可怕的事情。

理论上而言，除了浮动的环绕效果之外，使用浮动做的其他工作可以使用别的css属性实现，而且大部分情况是比浮动的效果好：首先没有了清除浮动一说，二是有关浮动的一堆bug也不会出现，三是元素间独立了，不会像浮动一样改变一个会影响其他。但是，由于大多数人对css的掌握程度以及一些浏览器兼容性的问题，很多时候，不得不使用看上去方便但潜在问题较大的浮动属性。