html+css清除浮动

为什么需要清除浮动？

1. 父级没有高度
2. 子盒子浮动了
3. 影像到下面的布局，我们就应该清除浮动

使用场景：

假设我们要放很多盒子（不确定数量），这样就无法确定盒子的高度。如下图，设置蓝色盒子高度后，假如子盒子（浮动）数量多换行后显示到盒子外面去了，这样不是我们想要的结果，我们想让蓝色盒子来自适应高度。

去掉高度设置（蓝色盒子的高度为0了） ，没有给父盒子高度，子盒子浮动不占有位置，最后父级盒子的高度就会为0，就会影响下面的标准流盒子。

由于浮动元素不再占用原文档流位置，所以它会影响后面的元素排版。

清除浮动后（浮动的子盒子会撑开父盒子）

清除浮动的四种方法（让子盒子闭合浮动）

• 额外标签法（将该盒子放在最后一个子盒子位置处）

.clear {
    clear: both;
}
banner_box1

• overflow:hidden（该样式加在父级盒子的样式中）

/* 清除浮动，溢出隐藏，无法显示溢出部分 */
        overflow: hidden;

• after伪元素

.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

.clearfix{
    /* IE6、7专有*/
    *zoom:1;
}

• 双伪元素清除浮动

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