清除浮动影响的几种方法

今天分享的是清除浮动的几种方法，当我们在布局的时候，图如下：

而我们想实现的是（1）里头的元素还在框里但是保持一行，（2）框的高度跟随里头最高的元素。

我知道有很多方式可以做，但今天我们要讲的是和浮动有关，所以只用float来说。

我们都知道只要father不设置高，它会随着里头元素的大小来撑开盒子。（我相信还没有人不知道把？不知道也没事，你现在知道了嘿嘿嘿）

实现之前代码如下：

.father{
	border: 1px solid orange;
	width: 700px;
}
.son1{
	width: 100px;
	height: 50px;
	background-color: silver;
}
.son2{
	width: 200px;
	height: 100px;
	background-color: yellow;
}	

<div class="father">
		<div class="son1"></div>
		<div class="son2"></div>
</div>

而当我们在.son1和.son2里头添加float:left之后反而变成：

这呢是因为咱们的father没有设置高度，只设置了边界，而里头的元素都设置了float浮动，浮在father的上方，father里头没有元素所以没法撑开了。这与我们的初衷不符合，所以我们要清除浮动所带来的影响。
以下是方法介绍：
一.额外标签法：
在最后一个设置浮动元素下面添加一个空的标签

<div class="father">
	<div class="son1"></div>
	<div class="son2"></div>
	<div class="clearfix"></div>
</div>

.clearfix{
	clear: both;
}

完美实现我们两个想法。之前有人说直接设置father高度和里面最高的一致不就行，可这是里头元素少啊 若是多的话或者临时添加son那不就是得改好多？是吧。
这个方法可以解决但也不太建议用，因为容易添加无意义标签。

二.overflow：
给father添加overflow:hidden 实现效果和上面一样

.father{
			border: 1px solid orange;
			width: 700px;
			overflow: hidden;
}

三.after伪元素：

		.father{
			border: 1px solid orange;
			width: 700px;
		}
		.clearfix:after{ /*正常浏览器清除*/
			content: "";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		.clearfix{  /*ie浏览器清除*/
			*zoom:1;
		}

<div class="father clearfix">
<!--省略两个son -->
</div>

:after 的意思是在father内部的最后加入内容。
display:block，使伪元素能显示出来，但内容为空的东西就不会有东西显示在页面上让人看见。所以， content:""；
为使伪元素不影响页面布局，让height:0，
紧接着清除浮动：clear:both，
允许浏览器渲染它但要隐藏， hidden： 设置对象隐藏 ，这样才能实现清除浮动。visibility: hidden;
【CSS参考手册visibility：设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间 】

四.双伪元素： :after :before

.clearfix:after,.clearfix:before{ /*正常浏览器清除*/
			content: "";
			display: table;
			/*table： 指定对象作为块元素级的表格。
			类同于html标签<table>*/
		}
		.clearfix:after{
			clear: both;
		}
		.clearfix{  /*ie浏览器清除*/
			*zoom:1;
		}

我自己的理解是因为在father内部的前后面都加了内容为空的东西，所以display用了table，其实block也可以。如果有朋友们这块地方能懂的话，欢迎和我说一下共同进步。

有错误和建议欢迎表示，万分感激。
此至 互勉！