关键词：清浮动
原因
浮动是因为使用float:left或float:right，使元素脱离了文档流而产生的浮动。
影响
1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background）背景颜色或背景图片，而父级不能被撑开，所以导致CSS背不能显示。
2、边框不能撑开
如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
解决方法
1 . 父级div定义 height
2 . 结尾处加空div标签 clear:both
* .clearfloat{clear:both}
3 . 父级div定义 伪类:after 和 zoom
/*清除浮动代码*/
.clearfloat:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0
}
.clearfloat{zoom:1}
4 . 父级div定义 overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
*缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。 *
5 . 父级div定义 overflow:auto
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
*缺点：内部宽高超过父级div时，会出现滚动条。 *
6.父级div 也一起浮动
毫无优点，仅作了解
完美清浮动方法
.clear:before,.clearafter{
content: ".";
line-height: 0;
display: table;
}
.clear:after {
overflow: hidden;
clear: both;
visibility: hidden;
}/*for w3c*/
.clear {
zoom:1;
}/*for IE*/
