清除浮动的方法

清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。
当父元素不设置高度时，内部元素不浮动时会撑开父元素，设置浮动时，父元素会变成一条线。

清除浮动的方法：
1.添加额外标签
给谁清除浮动就在其后面添加一个空白标签，标签属性引用clear: both;属性

<div class="small"></div>
	<div class="clear"></div>
	.clear {
		clear: both;
	}

2.父级元素添加overflow方法
通过触发BFC方式，实现清除浮动效果。若父盒子中有position定位会引出麻烦。
内容增多容易造成不会自动换行，内容被隐藏掉。

overflow: hidden;

3.使用after伪元素清除浮动
给父元素添加clearfix，after方式为空元素的升级版，好处是不用单独添加标签。

.clearfix:after { /*伪元素是行内元素，正常浏览器清除浮动方法*/
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	/* zoom: 1; ie6清除浮动的方式，*号只要IE6-IE7执行，其他浏览器不能识别，看到*就不会继续往下读，不进行解析*/
	*zoom: 1;
}

4.使用before和after双伪元素清除浮动
给父元素添加clearfix.

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

使用弹性布局flex后可以不用考虑清除浮动的问题