浮动所带来的问题（高度塌陷和脱标）以及解决方案

      
哪些情况需要清除浮动？

1. 父级无高度（带来高度塌陷问题）；
2. 子盒子浮动了（因为脱标问题）；
3. 影响下面的布局（因为脱标问题）；

      什么是高度塌陷？

    父元素高度自适应，子元素添加浮动后，造成父元素高度为0，称为高度塌陷问题。

       为什么会脱标？

    因为所有元素本都是在标准流里布局，即块元素独占一行、行内元素从左到右排列；被添加浮动效果后，不再属于标准流且会脱离标准流（脱标），此元素的位置将不再保留。此时，本被布局在下面的块元素会往上移动，排在右边的行内元素会向左边移动，导致整个布局发生改变。

      怎么解决问题？        清除浮动即可！

• 方案一：给父元素设定高度；

      做法：在属性中直接给出宽度、高度；
      优点：简单快捷；
      缺点：不便于后期增加内容后修改，不灵活；

• 方案二：给父元素添加overflow

      做法：在父元素属性中添加overflow，属性设置为：hidden/auto 都可；
      优点：简单快捷，可以在后面添加内容；
      缺点：当子元素有定位属性且超出了盒子范围内时，盒子以外的部分会无法显示；

• 方案三：额外标签法（隔墙法）clear:both

      做法：在子元素的末尾添加一个空的 div ，并添加以下属性；
      优点：简单快捷，兼容性极强（所有浏览器都支持）且添加浮动的溢出部分可以正常显示；
      缺点：容易造成代码冗余，只适用于块级元素；

div{
    clear: both;
    height: 0;
    overflow: hidden;
}

• 方案四：伪元素清除浮动

      做法：在父元素添加伪元素，添加内容如下：
      优点：不会造成代码冗余,需要时引用即可，推荐使用；

在css里设置后，直接调用类
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
} /* for IE/Mac */

父元素:after{
    content: "";
    height: 0;
    clear: both;
    overflow: hidden;
    display: block;
    visibility: hidden;
}

• 方案五：双伪元素清除浮动
        做法：给父元素添加以下代码；
        优点：不会造成代码冗余,需要时引用即可，推荐使用；

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