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;

}