清除浮动几种方式

解决问题：子元素都设置浮动，父元素没有设置高度，出现高度塌陷的问题。

一、万能清除法（推荐使用）

　　给父元素加上class=clear，并设置样式（写入公共样式中）

.clear:after{
    content:"";
    display:block;
    clear:both;
    
    height:0;
    overflow:hidden;
    visibility:hidden; /*处理浏览器兼容;*/
}
.clear{
    zoom:1;/*处理兼容*/
}

二、给父元素添加高度

　　缺点：无法做高度自适应布局；

三、父元素添加overflow属性

　　缺点：

overflow:hidden; /*遇到有定位设置的时候，定位超出的部分会隐藏；*/

overflow:auto；/*子元素超出的时候，会出现滚动条*/

四、在浮动元素下方添加盒子，并设置样式 clear:both；

　　缺点：代码冗余；

五、给父元素添加 float 属性

　　缺点：产生新的浮动问题；

六、给父元素添加display:table

　　缺点：产生新的未知bug；