css清除浮动

为什么要清除浮动?

<div class=“div">
     <div class=“div1">1</div>
     <div class=“div2">2</div>
</div>

如果div1和div2都设置了float:left，那么这个时候他们是脱离文档流的，如果此时给外层div设置height:auto，那么height是0，所以给外层div清除浮动可以让div1和div2有浮动的效果但是在文档流中，相当于display:inline-block；

然后清除浮动的方法：
可以首先在common.scss里面进行预定义：

@mixin clearfix() {
  zoom: 1;

  &:before, &:after {
    content: '';
    display: table;
  }

  &:after {
    height: 0;

    font-size: 0;

    clear: both;
    visibility: hidden;
  }
}

然后给div这个class进行:
.div{
@include clear fix;
}