参考 http://www.divcss5.com/jiqiao/j406.shtml
浮动产生原因
一般浮动是什么情况呢？一般是一个盒子里使用了CSSfloat浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。这个问题经常发生，特别是在我改写ecshop源代码的时候
本来两个黑色对象盒子是在红色盒子内，因为对两个黑色盒子使用了float浮动，所以两个黑色盒子产生了浮动，导致红色盒子不能撑开，这样浮动就产生了。
浮动产生负作用
- 背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。 - 边框不能撑开
如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。 - margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
在 http://www.zhangxinxu.com/wordpress/?p=1287 这位大神的博客中将float和absolute比作折翼的天使，和天使中的魔鬼，我觉得很准确
css解决浮动，清除浮动方法
对父级设置适合CSS高度，前提是对象内容高度要能确定并能计算好
这种方法基本不考虑，违背文档流自由发展的原则，后期开发难度很大
clear:both清除浮动
.clear{clear:both}
并添加到浮动div之后
缺点：会添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的，不考虑
父级div定义 overflow:hidden
在IE6中还需要触发 hasLayout ，例如 zoom：1；
<div style="overflow:hidden; *zoom:1;">
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；04年POPO就发现overflow:hidden会导致中键失效。不建议使用了
父元素设置 overflow：auto 属性
同上
缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中mouseover造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等
父元素也设置浮动
使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用
父元素设置display:table
优点：结构语义化完全正确，代码量极少
缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用
after + zoom方法
先来简单讲讲after，所谓after，就是指标签的最后一个子元素的后面。于是呢，我们可以用CSS代码生成一个具有clear属性的元素，其中的关键样式就是content了。或许您从网上看到的content里面的内容是”.”一个点，我了很多次，貌似随便写什么东西都没有问题，比如content:’clear both’;没问题，或是content:’张鑫旭’也是ok的。于是有：
.fix{zoom:1;}
.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}
这里的line-height:0写成height:0也是可以的。此方法可以说是综合起来最好的方法了，我都是用这个样式清除浮动的，不会影响任何其他样式，通用性强，覆盖面广，我很推荐哦。
由于IE6-7不支持:after，使用 zoom:1触发 hasLayout