CSS清除浮动

1.为什么要清除浮动

假设有一个场景，一个父盒子里面有三个子盒子，但是这三个子盒子使用了float来排列。也就是说三个盒子都是浮动的，所以盒子不占有高度。父盒子没有设置高度，目的就是想要让子盒子自己填充，如果子盒子都是使用的浮动，那么就不占有高度。那么这个父盒子及子盒子的区域就会被其他的非浮动盒子填充。
以上就是浮动所带来的影响。

2.清除浮动的方式

2.1 额外标签法(隔离法)

具体实现： 在浮动元素的末尾添加一个空的标签
例如：<div style="clear:both"></div>

 	<div class="box">
		<div class="son1"></div>
		<div class="son2"></div>
		<div class="clear"></div>
	</div>
		.son1 {
			width: 300px;
			height: 300px;
			background-color: pink;
			float: left;
		}
		.son2 {
			width: 400px;
			height: 400px;
			background-color: black;
			float: left;
		}
		.clear {
			clear: both;
		}

注意：新添加的盒子一定要是块级元素 不能是行内元素。

2.2 overflow清除浮动

在父元素上添加overflow: hidden就可以清除浮动
此方式的优点是简单
此方式的缺点是不会显示隐藏的内容

2.3 after伪元素清除浮动

/* 清除浮动的伪元素 */
		.clearfix:after {
			content: "";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		.clearfix {
			/* IE6 IE7使用 */
			*zoom: 1;
		}

这种方式清除伪元素浮动，其原理还是隔墙法
在父元素上加上一个伪元素，相当于是在子盒子的末尾加上一个盒子，必须是块级元素。
（这种方式虽然是较为复杂的一种方式，但是也是大长会用的一种方式，还是需要知道下）

2.4 双伪元素清除浮动

此方式是在元素的前面和后面都加上一个伪元素，使得前面和后面都堵上，这样会更加严谨一些

 .clearfix::before,
		.clearfix:after {
			content: "";
			display: table
		}
		.clearfix:after {
			clear: both;
		}
		.clearfix {
			/* IE6 IE7使用 */
			*zoom: 1;
		}