在很多开发过程中，常常会用到浮动流来弥补标准流布局所难以实现或者不合适的缺陷。但如果一味地使用浮动流进行布局，其产生的副作用足够大之时，就难免会遇到一些“尴尬”和棘手的问题。
什么是清除浮动？
在非 IE 浏览器（如 Chrome）下，当容器的高度为auto，且容器的内容中有浮动（即CSS配置有float:left或right）的元素，在这种情况下，容器的高度不会自动伸长以适应内容的高度，所以里面的内容溢出到容器外面而影响（甚至破坏）布局，这个现象称为浮动溢出。
为了避免这个现象的发生，消除其带来的负面影响而进行的一些CSS处理，称为清除浮动。
为什么要清除浮动？
可以很简洁地说，清除浮动就是为了清除浮动元素产生的不良影响。
浮动带来的负面影响
1、背景无法显示
由于浮动的设置，如果对父级设置了CSS 背景background、CSS背景颜色或CSS背景图片，则父级元素将不能被撑开，所以导致CSS背景不能显示。
2、边框无法撑开
如果父级设置了CSS边框border属性，由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin、padding设置值无法正确显示
由于浮动的设置，导致父级子级之间设置了margin或padding属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
举些例子：
1. 块状元素钻到浮动元素底面，被其所覆盖：
2. 浮动元素的父元素坍缩：
上面说的不够详细，这里再举个实际的例子：
有2个div，各个div里都有3个写有文字的p标签，完成初始化配置后是这个样子的：
代码：
<style>.box1{background-color:green;}.box2{background-color:yellow;}.box1>p{background-color:red;}.box2&g
