浮动最开始的目的是为了让文字环绕图片（一个图片和多行文字对齐）
1、包裹性：元素添加 float 属性之后 自动变成 inline-block 元素，能设置 宽高
2、破坏性：破坏自身高度，还会使父元素没有了高度，因为里面元素没有了高度
在css中高度有两个模型产生
1、Box 模型 margin+padding+height
2、line box模型 line-height （line box 的高度等于里面最高 inline box 的高度）
去除浮动影响方法很多
1 给父元素添加一个包裹属性 例如overflow:hidden; position:absolute; display:inline-block; float:left; zoom:1等 （overflow：hidden最常用）
2 浮动元素后添加<div style="clear: both;"></div> //clear只会影响自身，float会影响周围的元素
清除浮动
.group:after {
content: ' ';
display: block;
clear: both;
height: 0;
visibility: hidden;
}
* html .group { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */
或者：
.group:before, .group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
只考虑IE8及以上
.group:after {
content: "";
display: table;
clear: both;
}