float 浮动

浮动最开始的目的是为了让文字环绕图片（一个图片和多行文字对齐）

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;

}

巴特西