float 浮动

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

 

1、包裹性：元素添加 float 属性之后 自动变成 inline-block 元素，能设置 宽高

2、破坏性：破坏自身高度，还会使父元素没有了高度，因为里面元素没有了高度

 

在css中高度有两个模型产生

1、Box 模型    margin+padding+height

2、line  box模型    line-height    （line box 的高度等于里面最高 inline box 的高度）

 

http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/

 

去除浮动影响方法很多

1  给父元素添加一个包裹属性   例如overflow:hidden; position:absolute; display:inline-block; float:left; zoom:1等    （overflow：hidden最常用）

2  浮动元素后添加<div style="clear: both;"></div>    //clear只会影响自身，float会影响周围的元素

http://www.zhangxinxu.com/wordpress/2010/01/%E5%AF%B9overflow%E4%B8%8Ezoom%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AE%A4%E8%AF%86/

 

 

清除浮动

.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;

}