清除浮动深入剖析

清除浮动的四种方法：

现在有3个设置了浮动的盒子

 		<div style="border: 1px dashed blueviolet;" class="box">
			 <div class="div1"></div>
		</div>
		<div class="div2"></div>		
		<div class="div3"></div>
	<style>
		.div1{background: red;
				width: 300px;
				height: 300px;
				float: left;}
		.div2{background: green;
				width: 200px;
				height: 200px;
				float: left;}
		.div3{background: gold;
				width: 100px;
				height: 100px;
				float: left;}
	</style>

在不清除浮动的情况下是这样的:

一，额外标签法
在要div1的父元素后面加一个标签
< div style=“clear: both;”>< /div>
效果如下:

这种清除方法只是相当于让div1布局上不脱标，只是用了一个没有高度，也就不会显示的盒子加上清除两边浮动的属性来实现布局改变而已，实际上div1对于它的父元素来说还是浮动的，父元素div的高度由于div1设置了浮动，仍然为0。以上，总体来说就是这种方法只能解决布局上的问题，并不能解决父元素高度为0的问题。但是如果改变下加额外标签的位置，也能解决父元素高度问题，即把额外标签加到div1父元素内，位于div1后面，这样加的话，其实就和下面要分析的伪元素法差不多了，只是伪元素不用显式的来创建一个标签。

二，父元素触发BFC布局环境
给div1的父元素div加上属性{overflow：hidden}来触发BFC，关于BFC的解释，见BFC剖析
由于BFC的特性，就能起到清除浮动的作用，效果如下:

这种方法不仅能消除浮动带来的布局影响，也能解决父元素高度问题。但是额外标签法也有它的优势，因为BFC的特性，并不是强制清除两边的浮动，假如是给div2使用父元素触发BFC这个方法，div3会紧贴div2的下方，处于div1的右边，而如果用的是额外标签法，div3就会处于div1的下方。

三，单伪元素法清除浮动
给div1的父元素加上属性，.box:after{content: ‘.’;visibility:hidden;height: ‘0’;display:block;clear:both;} 这里设置visibility和height属性是为了将创建的伪元素 . 隐藏起来，主要是借助它的clear属性来清除两边浮动，这和额外标签法的原理差不多，其实还有一种写法不需要设置visibility和height属性，很简单，就是将content设置为’ ',为空自然就不需要隐藏起来了。
ps:在ie低版本中，需再给父元素加上属性.box{*zoom:1;}

这种方法虽然原理和额外标签法一样，但它同时也能解决父元素高度为0的问题，因为它不是额外标签，而是加在div1后面的伪元素，同属于父元素box的子元素，所以当它清除两边浮动时，父元素的高度就可以由设置了浮动的子元素撑开了。BFC那种方法我讨论了，用到div2上的时候，会和使用额外标签法的布局效果有差异，那么这种方法呢，很显然也有差别，因为这种方法原理和额外标签法一样，都是借助了clear属性来清除两边的浮动，所以它的布局效果和额外标签法是一样的。

四，双伪元素法清除浮动
给父元素加属性，.box:before,.box:after{content:’ ';display:table;} .box:after{clear:both} ie兼容.box{*zoom:1} 效果和单伪元素一样，其实这种方法也和单伪元素差不多，初看会感觉多此一举，我直接设置.box:after{content: ’ ';display:table;clear:both}也能实现效果，但是设置before伪元素是有它的好处的，它可以防止margin塌陷。