清除浮动的方法

1、清除浮动的原因：

在有些情况下，我们 没有给父级盒子设置高度 ，而是通过给子盒子设置浮动效果来撑开盒子，达到想要的页面效果，但是设置浮动之后，会影响下面盒子的布局，所以我们需要清除浮动。

注意：只给子盒子添加浮动效果，此时，父盒子的高度为0

2、清除浮动的方法

一般清除浮动有4中方法：

（1）额外标签法：
在 浮动元素末尾添加一个空的块级元素标签，设置 clear:both 属性效果。

<div style="clear:both"></div>

（2）给父级元素添加 overflow属性
给 父级元素添加 overflow:hidden 属性，属性值可以设置为hidden、auto、scroll
注意：添加overflow:hidden属性之后，看不到溢出的部分了。

overflow: hidden

（3）:after伪元素法
可以给 父元素添加after伪元素 ，设置伪元素的样式属性为：

//假设给父元素定义的类为：clearfix
.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;	
 }

注意： 可以将添加after伪元素看作额外标签法的升级。

（4）双伪元素清除浮动
可以 给父元素添加双伪元素，并设置伪元素的相关样式属性：

//假设给父元素定义的类为：clearfix
.clearfix:before, .clearfix:after {
	content: "";
	dispaly: table;
},
.clearfix:after {
	clear: both;
}