CSS清浮动

关键词：清浮动

原因
浮动是因为使用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*/