前端学习笔记-清除浮动4中方法

1、标准写法
（在浮动的盒子后面再加一个盒子div，不写任何内容只加上清除浮动）

div{
  	clear:both;
}

缺点：不建议写-----因为每次都要添加一个空盒子

2、在父级的盒子上添加

div{
	overflow:hidden; /*触发BFC*/
} 

缺点：内容增多时候容易造成不自动换行导致内容被隐藏掉，无法显示需要溢出的内容

3、伪类实现清除浮动
其中的.clearfix的类名是自定义的，根据个人需要

.clearfix:after{
	content: ".";    /*内容随便写，写个小点*/
	display:block;   /*转换为块级元素*/
	height:0;        /*高度为0，避免上面小点内容撑开盒子*/
	visibility:hidden;  /*隐藏盒子*/
	clear:both;      /*清楚浮动*/
}

4、伪类升级版
其中的.clearfix的类名是自定义的，根据个人需要

 .clearfix:before,.clearfix:after{
    	content:"";
    	display:table; /*触发BFC*/
    }
    .clearfix:after{
    	clear:both;
    }

兼容IE6-7

.clearfix{*zoom:1;}

在我们工作中平时最长用是第四种伪类升级写法