清除浮动

清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0的情况。

清除浮动的方法有很多种，这里我只写被大家推荐切常用的方法。

1、父级添加伪类

// html部分
<div class='father'>
  <div class="left"></div>
  <div class="right"></div>
</div>

// css部分
.father:after{
    display: block;
    content: '';
    clear: both;
}
.left{
    width: 200px;
    heght: 100px;
    float: left;
}
.right{
    width: 200px;
    heght: 100px;
    float: right;
}

2、父级添加overflow属性

可以通过触发BFC的方式，可以实现清除浮动效果

// html部分
<div class='father'>
  <div class="left"></div>
  <div class="right"></div>
</div>

// css部分
.father{
    overflow: hidden;
}
.left{
    width: 200px;
    heght: 100px;
    float: left;
}
.right{
    width: 200px;
    heght: 100px;
    float: right;
}