为何需要清除浮动以及如何清除浮动

    一、

    由于需要将两个块级元素并列显示，我们需要用到float属性，浮动的框就可以左右移动，但是设置float属性后，这个块级元素就脱离了文档流，浮动元素不会影响块级元素的布局，但是影响内联元素的布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。所以我就需要清除浮动。

    二、

    1.通过加入.clearfix:after类清除浮动

.clearfix:after{
  display:block;
  content:'';
  clear:both;
  height:0;
}

然后在所需要清除浮动的块级元素中的class中加入clearfix

   2.添加新元素，使用clear:both

        .clear{clear:both;}

        <div class="clear"></div>