清除浮动的方法，hasLayout和zoom的介绍
为什么会使用浮动？
一开始出现浮动只是为了解决文字环绕图片问题，但最后是为了解决几个块级元素并排显示问题，虽然可以使用定义块级元素的display为inline-block（这种方式也不会出现父级元素坍塌问题）但是这种方式不能控制元素的位置而是默认从左到右，所以要实现元素是居左还是居右使用浮动更方便。
浮动的弊端
使用了float之后不清除浮动就会出现父元素高度塌陷问题，当对于所有的子元素都设置了浮动之后，而父元素没有去设置高度，父元素失去了子元素支撑同时父元素的高度消失，缩成了一条线，高度出现了塌陷
解决浮动带来的影响
1、直接给父元素添加高度（不推荐）
高度固定死，内容如果是后端返回的数据不固定的话，不够灵活
2、额外标签法（不推荐）
在最后一个浮动标签后，新加一个标签，给其设置 clear：both
clear: both, 本质是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来
如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高
优点：通俗易懂，方便
缺点：添加无意义标签，语义化差
3、父级添加 overflow 属性（不推荐）
父元素添加 overflow:hidden
overflow: hidden, 本质是通过触发BFC方式，实现清除浮动
- 优点：代码简洁
- 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
4、使用 after 伪元素清除浮动
.clear::after {
content: '';
display: block;（必须变成块元素）
height:0; 处理兼容，让没有高度
visbility: hidden;处理兼容，让消失
clear: both;
}
/* ie兼容 */
.clear {
/* 触发 hasLayout */
*zoom: 1; /* ie6 清除浮动的方式， * 号 只有在IE6 IE7执行，其他浏览器不执行 */
}
- 优点：符合闭合浮动思想，结构语义化正确。
- 缺点：ie6-7不支持伪元素 ::after，在ie6、ie7中需要用zoom:1触发hasLayout
5、使用 before 和 after 双伪元素清除浮动
.clear::after, .clear::before {
content: '';
display: block;
}
.clear:after {
clear: both;
}
/* ie兼容 */
.clear {
*zoom: 1; /* ie6 清除浮动的方式， * 号 只有在IE6 IE7执行，其他浏览器不执行 */
}
优点：代码更简洁
缺点：兼容性不好，在ie6、ie7中需要用zoom:1触发hasLayout
hasLayout属性
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）
如果它设置成了true，它负责对自己和可能的子孙元素进行尺寸计算和定位，因此元素不得不扩展去包含它的流出的内容，例如浮动或者很长很长的没有截断的单词。如果haslayout没有被设置成true，那么元素得依靠某个祖先元素来渲染它。
有时候在IE下一些复杂的CSS设置解析起来会出现bug，其原因可能与hasLayout没有被自动触发有关，我们通过一些技巧，手动触发hasLayout属性就可以解决Bug了。大多IE下的显示错误，就是源于 haslayout。
hasLayout属性不能直接设定，你只能通过设定一些特定的css属性来触发并改变 hasLayout 状态。hasLayout的触发方法有很多种，例如设置width,height值，设置position为relative等。但如果设置了width,height,或position都会在触发hasLayout的同时带来一些副作用的。
hasLayout 对于内联元素也可以有效果，当内联元素的 hasLayout 为 true 的时候，可以给这个内联元素设定高度和宽度并得到期望的效果。
zoom的介绍
zoom属性是IE浏览器的专有属性（亲测后新版chrome和Opera也支持），它可以设置或检索对象的缩放比例，也就是作用在于缩放元素。目前为止，wekbit系列、ie系列（ie6~ie11）均支持。设置 zoom:1 可以在IE6下清除浮动、解决margin导致的重叠等问题。
通常，当浮动子元素导致父元素塌陷的时候，只要给父元素加上overflow: hidden;来解决，但是对于IE不行，需要触发其hasLayout属性才可以。
zoom:1就是在 IE6 中可用于触发 haslayout 属性的。通常，在给低版本的IE做兼容的时候会用到zoom:1。例如，清除浮动的时候
