清除浮动的几种方式？

清除浮动的几种方式？

1、父级 div 定义 height

原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。 简单、代码少、容易掌握 ，但只适合高度固定的布局.

2、结尾处加空 div 标签 clear：both

原理：在浮动元素的后面添加一个空 div 兄弟元素，利用 css 提到的 clear：both 清除浮动，让父级 div 能自动获取到高度 ，如果页面浮动布局多，就要增加很多空 div，让人感觉很不好.

3、父级定义 伪类:after 和 zoom

.parent:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .parent{
/* 触发 hasLayout */
* zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
  }

4、父元素添加overflow: hidden

原理：IE8 以上和非 IE 浏览器才支持：after，原理和方法 2 有点类似，zoom(IE 专有属性)可解决 ie6，ie7 浮动问题 ，推荐使用，建议定义公共类，以减少 CSS 代码。

5、双伪元素清除法

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

总结：

1、父级div设置heigth
2、结尾处加空的div标签 clear：both
3、父级定义 伪类 :after 和 zoom
4、父级 div 定义 overflow：hidden
5、双伪元素清楚法