清除浮动的三种方式

1.添加空div并应用clear:both

.b lank {

clear:both;

}

<div class="box ">
      <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>

<div class="blank">3</div>
</div>

2.给父元素设置overflow属性

.box {

overflow:hidden;

/*或者*/
      /*overflow:auto;*/

}

<div class="box ">
      <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>

</div>

3.使用伪元素进行清除浮动

<div class="box clearfix ">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>

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