清除浮动本质

清除浮动主要是为了解决父级元素因为子集浮动引起内部高度为0的问题
问题：如果孩子加浮动那么孩子脱离标准流而父亲没有高度，这时下方的盒子就会升上来
解决方法：
1.给父亲高度
2. 如果不方便给高（因为有时不知道里面的孩子有多高，比如新闻，不知道里面会有多少字），clear属性用于清除浮动，基本语法格式如下：
选择器 {clear: 属性值}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动影响（经常用）

额外标签法

是通过在浮动元素末尾添加一个空的标签 例如

,或其他标签br等亦可
在浮动盒子后面添加一个空盒子

.father {    /*父亲没给高度*/
			border: 1px solid red;
		}
		.damao {
			width: 100px;
			height: 100px;
			background-color: pink;
			float: left;
		}
		.ermao {
			width: 150px;
			height: 100px;
			background-color: purple;
			float: left;
		}
		.xiao {
			width: 300px;
			height: 120px;
			background-color: #000;
		}
		.clear{
			clear: both;   /*清除浮动的影响*/
		}

	<div class="faeher">
		<div class="damao"></div>
		<div class="ermao"></div>
		<div class="clear"></div>
	</div>

优点:通俗易懂，书写方便
缺点：增加无意义的标签，结构化较差

父级添加overflow属性方法

可以通过触发BFC的方式，开始实现清除浮动效果。

可以给父级添加：overflow为hidden    auto     s'scroll        都可以实现。

优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

使用after伪元素清除浮动

：after 方式为空元素的升级版，好处是不用单独加标签了
使用方法：

.clearfix:after { content: ".";display: block;height: 0;clear: both;visibility: hidden; }
.clearfix {*zoom:1;}   /*IE6.7专有*/

		.clearfix:after {
			content: ".";   /*内容为小点，尽量加不要空，否则旧版本浏览器有空隙*/
			display: block;  /*转换为块级元素*/
			height: 0;   /*高为0*/
			visibility: hidden;   /*隐藏盒子*/
			clear: both;  /*清除浮动*/
		}
		.clearfix {    /*ie6.7浏览器的处理方式  为了兼容性添加*/
			*zoom: 1;  /* *代表ie6.7能识别的特殊符号  带有这个*的属性只有ie6.7才执行 zoom就是ie6.7清除浮动的方法*/
		}

优点：符合闭合浮动思想，结构语义化正确
缺点：由于IE6-7不支持，使用zoom：1触发hasLayout

注意content"."里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox7.0前的版本会有生成空格

使用before和after双伪元素清除浮动

		.clearfix:before, .clearfix:after {
			content: "";
			display: table;
		}
		.clearfix；after {
			clear: both;
		}
		.clearfix {
			*zoom: 1;
		}

代表网站：小米、腾讯等
优点：代码更简介
缺点：由于IE6-7不支持after，使用zoom.1触发hasLayout。

推荐此种方法