常用清除浮动方式与浏览器兼容

 1、父级div定义height

 此种方法只适合固定height的使用,不存在浏览器兼容问题。

2、:after/:before(推荐)
  .clearfix:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
   }

 此种方式是比较常用,可移植性高,但ie低版本不支持,设置.clearfix{zoom:1}可解决。

3、父元素overflow:hidden/overflow:auto

 父元素会自动检查浮动元素高度,但此种方式有一定的弊端,会让超出其区域的隐藏或者出现滑动条。

4、其它方式

 添加空标签并设置clear:both;父元素设置浮动;(不推荐使用)

你可能感兴趣的:(css)