我们知道浮动在CSS中是一个很重要的属性，它能让网页的布局变得更好看，但是它在好用的同时也有相应的副作用。
- 浮动产生的副作用
1.当子元素都设置了浮动时，就会导致父元素的塌陷，即父元素撑不开；就是下面这种现象
很明显，父元素并没有被撑开，就是所谓的塌陷，注意这里height应该设置为auto，否则就不叫用子元素撑开；如果前面的元素设置了浮动，那后面的元素就有可能产生异位的现象。
2.如果前面的元素设置了浮动，那后面的元素就有可能产生异位的现象。
所谓的异位就是图中的元素2的位置，如果元素1没有设置左浮动，元素2就不会上来，也不会被元素1挡住。
解释：出现这两点的原因就是因为float浮动会使元素脱离正常的文档流。但是还有一个比较奇怪的现象就是虽然float会脱离正常的文档流，但它还是会占有文本的位子，即文本会环绕在其周围，而不会被覆盖，如下图这种情况：
接下来就进入正题了。。。
- 消除浮动副作用的方法
1.手动给父元素加高度
2.通过clear属性进行浮动消除
clear属性可以取的值有none,left,right,both，这个属性仿佛就是生来为了和float作对的，float设置浮动，clear就消除浮动，他们完全相反。但他们也是有区别的，我在之前的一个博客里也写过，有一个很好理解的口诀来区分float和clear之间的根本区别，float是一个好人，他只对自己产生影响；而clear就像一个坏人一样，他不允许自己的周围有浮动，给人的感觉就是很霸道的样子。那么具体的怎么用clear解决问题呢？
这个属性主要是为了解决元素异位的问题，不能解决父元素塌陷的问题；针对异位的问题，我们只需要给发生异位的元素设置一个clear属性就行，如果是左浮动，clear的值就取left，其他的相应的去取。
3.给父元素添加浮动
这一招有以毒攻毒的意味，如果子元素设置了left浮动，可以通过给父元素也设置left浮动，这样父元素就能被子元素撑开，因为大家都不在正常的文档流中。
4.给父元素添加overflow结合zoom:1一起使用
这一招就看起来就非常的高大上了，因为好像这两个属性都没听过，那么就听我娓娓道来吧！
这个就是在父元素样式里面加上overflow:hidden;和zoom:1这两个语句，看起来很简单，那么他的主要功能是什么呢？
overflow这个属性仿佛是为了考虑兼容性而诞生的，他有很多的妙用这里我就不详细解说了，overflow主要是处理溢出问题的，我们这里就是子元素相对于父元素出现了溢出现象，举一个更加明显的例子：（还是刚刚的程序，只是加大了子元素的宽度）
上图中子元素超过了父元素的宽度，这个时候overflow:hidden；就发挥了自己的作用，他就像一把剪刀一样把多余的部分减掉了，这也是这个方法的缺陷，很容易将子元素的关键信息删掉。用了overflow:hidden；的结果如下图：
有没有看起来很完美，这就是overflow:hidden；发挥的巨大作用了。接下来，还有一个语句，zoom:1;的作用是为了兼容，大家都知道IE浏览器一直都是一个让人很头疼的东西，这个语句就是为了兼容IE浏览器的问题。