2021-03-26

对盒子清除浮动

为什么要清除盒子的浮动？
在一个大盒子里面包含若干个小盒子时，标准流大盒子一般都设计了高度。但是并不是所有大盒子有必须给高度，在大盒子不方便给高度时，我们理想状态是想让小盒子撑开父盒子的高度。但小盒子都设计浮动后，父盒子将不会有高度。

如图：若将大毛和二毛设置浮动后，大盒子的高度将会变为零。

清除浮动的方法：
1.额外标签法也称为隔墙法，是W3C推荐做法。
方法：在浮动的元素末尾添加一个空标签。

.clear{
      clear:both;
}

<div class="box">
     <div class="damao">大毛</div>
     <div class="damao">二毛</div>
     <div class="clear"></div>
</div>

2.父级添加overflow属性。
可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。
这个方法无法显示溢出的部分。

.box{
     overflow:hidden; 
}

3.父级添加after伪元素。
：after方式是额外标签法的升级版。父元素直接加入clerafix：

<div calss="box clearfix"></div>

.clearfix:after{
      content:"";
      dispaly:block;
      height:0;
      clear:both;
      visibility:hidden;
}
.clearfix{
    *zoom:1;
}

4.父级添加双伪元素。父元素直接加入clerafix：

<div calss="box clearfix"></div>

.clearfix:before,.clearfix:after{
        content:"";
        display:table;
}
.clearfix:after{
    clear:both;
}
.clearfix{
    *zoom:1;
}