在我们初学前端时候,总会遇到浮动忘了清除的问题,设计稿上面的一排总是会掉到下面一排,'现在'!此时此刻!!!我就带你了解五种清除浮动的方法
1.浮动的目的和缺点
他的目的：用于多个块级元素显示在同一行中
浮动很大方，他把位置让给标准流.不占位置，但是他必须得同父级元素共同搭配使用.
因为浮动不占据标准流的位置,在父盒子中发现位置不够了,会直接显示在下一排,或者下面的标准流会直接显示在浮动盒子的下面而被挡住,从而打乱了我们的布局,而清除浮动则解决了这一问题.
2.清除浮动的五种方式
2.1父级 div 定义 height
原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。 简单、
代码少、容易掌握 ，但只适合高度固定的布局
2.2、结尾处加空 div 标签 clear：both
原理：在浮动元素的后面添加一个空 div 兄弟元素，利用 css 提高的 clear：
both 清除浮动，
让父级 div 能自动获取到高度 ，如果页面浮动布局多，就要增加很多空 div，让人感觉很
不好 .
2.3、父级 div 定义 伪类：after 和 zoom
/清除浮动代码/
.clearfix：after{
content：""；
display：block；
visibility：hidden；
height：0；
line-height：0；
clear：both；
}
.clearfix{zoom：1}
原理：
IE8 以上和非 IE 浏览器才支持：after，原理和方法 2 有点类似，
zoom(IE 专有属性)
可解决 ie6，
ie7 浮动问题 ，推荐使用，建议定义公共类，以减少 CSS 代码。
2.4、父级 div 定义 overflow：hidden
超出盒子部分会被隐藏，不推荐使用
2.5. 双伪元素法：
.clearfix：before，
.clearfix：after {
content： ""；
display： block；
clear：both；
}
.clearfix {
zoom： 1；
}
总结:一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。
二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素，关于这一点。
推荐使用双伪类元素法,这样可以使代码更简洁,只需要放到css中,给class中添加类名即可,这种方式也是当下使用较多的方式,重要的是不会让你看起来很菜
