css清除浮动

1-添加空标签，并设置样式：clear:both

<div style="clear: both;"></div>

2-在要清除浮动的父级元素，添加样式：overflow:hidden

<style>
    .wrap{
      overflow: hidden;
    }
    .left,.right{
      width: 200px;
      height: 200px;
    }
    .left{
      float: left;
      background: #344;
    }
    .right{
      float: right;
      background: #456565;
    }
</style>
<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
    <div style="width: 300px;height: 300px;background: #999;"></div>
</div>

3-要在清除浮动的父级元素添加伪元素:after，并设定样式

<style>
    .wrap:after{
      content: "";
      display: block;
      clear: both;
    }
    .left,.right{
      width: 200px;
      height: 200px;
    }
    .left{
      float: left;
      background: #344;
    }
    .right{
      float: right;
      background: #456565;
    }
</style>
<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
</div>