清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。

1、父级div定义height；2、父级div 也一起浮动；3、常规的使用一个class； .clearfix::before, .clearfix::after { content: " "; display: table; } .clearfix::after { clear: both; } .clearfix { *zoom: 1; } 4、sass编译的时候，浮动元素的父级div定义伪类:after &::after,&::before{ content: " "; visibility: hidden; display: block; height: 0; clear: both; }

第4点解析原理：

1. display:block 使生成的元素以块级元素显示,占满剩余空间;

2.height:0 避免生成内容**原有布局的高度。

3.visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;

4.通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的

5.zoom:1 触发IE hasLayout。

通过**发现，除了clear:both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。

补充：zoom:1的清除浮动原理

清除浮动，触发hasLayout；

zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。

譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。大概如下：

当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

zoom属是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。然而，zoom现在已经被逐步**化，出现在 CSS 3.0 规范草案中。

目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？可以通过css3里面的动画属性scale进行缩放。