清除浮动

清除浮动的本质
主要是为了解决父级元素在子级元素设置浮动后，引起内部高度为零的问题。即父级元素是标准流且没有设置高度，可子级元素设置了浮动，所引起的问题。
清除浮动的定义
清除浮动叫闭合浮动更好一些。清除浮动就是把浮动盒子圈到里面，让父盒子闭合出口和入口。
清除浮动有四种方法，分别是额外标签法、使用overflow清除浮动法、使用伪类元素after、使用双伪类元素法。下面让我们去了解它们。

html代码

css代码

没设置浮动结果如下图：

父级元素设置浮动后结果如下图：

额外标签法
额外标签法就是在设置浮动盒子的最后加上一个空白标签，例如<div> </div>,或者加入<br />等。
比如添加空白标签<div> </div>后代码块和运行结果如下：

<div class="father clearfix">
			<div class="son1"></div>
			<div class="son2"></div>
			<div style="clear:both"></div>
		</div>

这个方法虽然解决了子级元素设置浮动后给无高度的父级元素带来的影响。但是会带来太多无意义的标签，导致结构化较差。

使用overflow清除浮动
通过给父级元素增加overflow属性，来清除浮动。代码如下。

.father{
   		width:200px;
   		border:3px solid crimson;
   		overflow:hidden; 溢出隐藏
   	}

这类清除浮动方法虽然代码简洁，但是当内容增多时，容易造成不会自动换行而导致内容被隐藏，无法显示溢出元素。

使用伪类:after清除浮动
该方法是使用额外标签法的升级版，它的好处是不用单独使用空标签。

.clearfix:after{
   		content:"."; /* 尽量要有内容加入,因为兼容性. */
   		display:block; /* 转换为块级元素 */
   		height:0;
   		clear:both;/* 清除浮动 */
   		visibility:hidden;/* 隐藏盒子 */
   	}
   	.clearfix{
   		*zoom:1; /* 兼容性,*代表ie6和ie7能识别的符号,带有*属性只有ie6和ie7中执行,zoom是ie6和ie7清除浮动的方法 */
   	}

代表网站有百度、淘宝、网易等。

使用双伪类清除浮动 （推荐使用）
该方法是使用了 :before和 :after两个伪类去清除浮动，该方法最符合闭合浮动的思想，因此当需要清除浮动时，推荐使用这一个方法。
代码如下

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

在使用伪类方法清除浮动时，要注意兼容性。