关于清除浮动塌陷的几种方法总结

什么是浮动呢？
定义这样说：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 其实也就是把快级元素变成能和别的快级并排成一行。

浮动的的元素有4点特性：
1.浮动元素会脱离标准文档流，已经不区分快和行了。

2.浮动的元素会互相贴靠。

3.浮动的元素有“字围”的效果。

4.收缩。一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度。

同样在前端攻城狮的道路，我们都是真诚尽心尽力的去学习进取。奈何先是各大浏览器厂商的大战不断，导致我们这群学习的人苦不堪言，一片水生火热呀。不得不想进各种hack方法解决。（没错，这里就是吐槽的IE6！）

其次文档标准流，在浮动之后也会挖下塌陷的大坑。初学者稍有不慎，塌陷的失控的子元素到处乱窜，弄的你鸡飞狗跳苦不堪言。那么为了后面前端大道越行越远，下面就跟大家讲解一下清除浮动的4种套路。 

不过在讲套路得时候，咱们顺带的也把浮动之后塌陷大坑给顺便重现一样。

浮动塌陷大坑：
先来看一个小小的demo：现在有两个div，div身上没有任何属性。每个div中都有li，这些li都是浮动的先是html骨架部分  

下面的是css样式：

看到这里，如果说没有吃过浮动塌陷大亏的同学，肯定会以为这个网页中效果是这个样子

但是实际上浏览器最终的渲染的样子：

第二个div中的li，去贴第一个div中最后一个li的边了。

原因就是因为div没有高度，不能给自己浮动的孩子们，一个容器。

所以第二个div中的li，去贴第一个div中最后一个li的边了！

这种现象又称作为浮动塌陷现象！

讲完浮动塌陷之后，让我开始回归今天的正题。清除浮动塌陷的4种方法

方法1：给浮动的元素的上级添加高度

如果一个元素要浮动，那么它的祖先元素一定要有高度。高度的盒子，才能关住浮动。

只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

所以只需要给li的上级ul或者div设置一个height：40px；（只要是浮动元素的上级元素就可以。），那么第二个div就好挤下来，在第一个盒子下面显示出来。