为什么要清除浮动?
<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;
}