-方法1：伪元素清除浮动（也是小编最常用的方法）
css如下：

.box:after{
  content:'.';
  height:0;
  visibility:hidden;    /*visibility:visible;*/
  display:block;
  clear:both;
}
.fl{
  float:left;
}
.fr{
  float:right;
}

html如下：

<div class="box">
  <div class="fl"></div>
  <div class="fr"></div>
</div>

-方法2：在浮动元素下方添加块级元素
css如下：

.fl{
  float:left;
}
.fr{
  float:right;
}
.clearfix{
  clear:both;
}

html如下：

<div class="fl"></div>
<div class="fr"></div>
<div class="clearfix"></div>