CSS之浮动（二）

1. 浮动的非本职工作

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

1.1 单个无浮动的li元素

HTML:

这里的li元素为什么会有高度？如果您认真读过前半部分内容关于line boxes模型与高度的关系的内容，应该知道，由于图片没有应用float属性，其本身有一个正常的inline box，这个inline box高度等于图片的height，在这行元素中，图片这个inline box的高度最高，于是传递给了line box，line box是个真正意义上的高度，直接作用于containing box（就是这里的li元素，使li元素有一个高度）。理解了这个您就会明白为什么要是这里的图片添加了float属性，li高度会塌陷了：浮动破坏了inline box

1.2 单个左浮动的li元素

HTML：

通过添加浮动，让li丧失高度，现在的高度完全是由图片的自身高度撑起来的(包裹性)

浮动的“包裹性”让元素变成类似于inline box的元素，而浮动的“破坏性”正是破坏inline box元素的，这其中岂不有矛盾。其实非也，对于block水平的这类块状元素需要先让其变成类似效果的内联元素，然后再破坏之，实乃先诱拐再奸杀的生动实例啊！

1.3 多个左浮动的li元素

HTML:

因为浮动的破坏性导致添加浮动后的li元素的高度为0，所以所有的li都是并排显示，但是因为图片的真实存在所以并没有产生覆盖而是紧贴着显示

1.4 左浮动的li元素和无浮动的li元素

HTML:

因为添加浮动的li的高度为0，所以假设这个li压根是不存在的，从而后面的li直接无视前面的li元素，宽度100%显示，只是图片本身是实体的原因导致图片和图片之间无法重叠显示，所以图片靠在一起

2. 证据

前文是着重分析了浮动的“本职工作”：文字环绕显示；本文着重分析了浮动的“非本职工作”：列表布局；两者都是用的同样的原理解释的，那么有什么证据可以证明“页面布局”不是浮动的“本职工作”呢。答案关键字就是：高度塌陷

HTML:

上图显示ul高度为0，这是必然的，正常的，应该的。您要是在IE下看到ul有高度，认为这是Firefox等浏览器有问题就错了，您把ul的width属性去掉，看看，会发现IE下ul高度也为0， 这是IE的layout作祟。至于为什么ul高度为0，我前面很多地方都已经讲了，不再说了。但是，从中我们可以看到，浮动本不是用来列表布局的，而是用来使元素环绕显示的，因为元素环绕（例如文字），其自身是含有inline boxes高度的，这是inline水平的元素形成高度的基础，所以虽然浮动元素没有高度，但是其周围环绕的元素是有高度的，只要环绕元素比浮动元素高度高，父标签无高度的问题自然也就没有了，也就形成了文字环绕的效果，但是纯粹一堆浮动元素会有高度吗？没有，自然而然父元素高度就会塌陷。所以浮动元素塌陷的问题根本就不是浏览器的bug，而是我们没有正确地深入地了解浮动，是我们自己使用不当，因为浮动本不应该用在这里的

3. 解决高度塌陷的问题 – 清除浮动

CSS中有个讨论较多的话题就是如何清除浮动，清除浮动其实就一个目的，就是解决高度塌陷的问题。为什么会高度塌陷？什么时候会高度塌陷？塌陷原因是：元素含有浮动属性 – 破坏inline box – 破坏line box高度 – 没有高度 – 塌陷。什么时候会塌陷：当标签里面的元素只有样子没有实际高度时会塌陷。所以呢，并不是只要有浮动元素就会坍塌，就要清除的，CSS水平高低衡量的标准之一就是改用什么样式就用什么样式，不多用也不少用

3.1 投机取巧法

就是直接一个

放到当作最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强，使用方便，是初学时使用的上佳之选。但是我从来不用，因为我看到的是个巨大的浪费，浪费了一个标签，而且只能使用一次，我个人是无法容忍的，所以这个方法不推荐。而且有时候一不留神中间多了个空格会产生一段空白高度的

3.2 overflow + zoom方法

此方法优点在于代码简洁，涵盖所有浏览器，可谓不错的选择啊。不过也是有问题的，就是这个overflow:hidden;是个小炸蛋，要是里面的元素要是想来个margin负值定位或是负的绝对定位，岂不是直接被裁掉了，所以此方法是有不小的局限性的。我一般不用这个方法，只是有时候顺便去除浮动时用用

3.3 after + zoom方法

先来简单讲讲after，所谓after，就是指标签的最后一个子元素的后面。于是呢，我们可以用CSS代码生成一个具有clear属性的元素，其中的关键样式就是content了。或许您从网上看到的content里面的内容是”.”一个点，我了很多次，貌似随便写什么东西都没有问题，比如content:’clear both’;没问题，或是content:’张鑫旭’也是ok的。于是有

这里的line-height:0写成height:0也是可以的。此方法可以说是综合起来最好的方法了，我都是用这个样式清除浮动的，不会影响任何其他样式，通用性强，覆盖面广，我很推荐哦

总结：

1. 清除浮动的方法还是推荐使用’after+zoom’

2. 添加浮动后的图片的容器的高度因为浮动的破坏性其高度变成了0，但是因为实体图片自身的高度，所以后面的元素并不会覆盖它，这也是浮动元素和绝对定位元素的最大区别