-方法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>