清除浮动的五种方法

清除浮动的方法（高度塌陷）

原因：

父子级标签，父级没有高度，后面的标准流盒子受到影响

解决方法：

1. 直接给父盒子添加高度（一般不用）

优点：简单，粗暴
缺点：某些特定时候不能固定高度

2. 额外标签法（一般不用）

 操作：
	1. 在父元素内容的最后添加一个 **块级元素**（空元素）
	2. 给添加的块级元素设置 clear:both;

 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

3. 单伪元素清除法（常用）

.clearfix::after {
    content: '';
   	display: block;
   	clear: both;
}

4. 双伪元素清除法（既能解决外边距塌陷，也能清除浮动）

.clearfix:before,.clearfix:after {
	content:"";
   	display:table; 
}
 .clearfix:after {
   	clear:both;
  }
  /* 为了防止低版本的IE浏览器不支持clearfix选择器或者某些属性，在最后加上zoom:1来清除浮动 */
  .clearfix {
   	zoom:1;
  }   

5. 设置 overflow:hidden; 溢出隐藏（既能解决外边距塌陷，也能清除浮动）

注意：
1、3、4、5 都是加在父元素上