清除浮动目的以及方法

说到清除浮动，首先我们要知道为什么清除浮动

清除浮动的目的：
父元素没有设置高度，里边的子元素都浮动，浮动的子元素不能撑开父元素的高度，导致布局混乱，所以清除浮动是为了让浮动元素撑开父元素的高度

清除浮动的方法：

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

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

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

3.给浮动元素的父元素定义overflow:hidden
超出盒子部分会被隐藏，不推荐使用

4.单伪元素清除浮动：
父级div定义伪类
清除浮动代码：

.clearfix:after{
               content:“”;               //content为必填项
               display:block;            //伪元素默认为行内元素，转为块元素
                visbility:hidden;        //元素显示模式为隐藏
                height:0;                //高度设为0
                clear:both;              //清除浮动
}
.clearfix{
               *zoom:1;                  //兼容ie6,7老版浏览器
}

5.双伪元素清除浮动

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