清除浮动全总结

发表于 | 分类于 | 阅读

清除浮动

清除浮动是指清除浮动所造成的影响。

清除浮动方法

  • 目前最主流的方法：clearfix

    1
    2
    3
    4
    5
    6
    7
    8
    .clearfix：after{
      content:"";
      display:block;
      clear:both;
    }
    .clearfix{
      *zoom:1;    /*兼容IE6，触发IE6中的hasLayout属性，达到BFC类似作用*/
    }

  • overflow:hidden;或overflow:auto;

    父容器会形成BFC。
    1
    2
    3
    .clear{
      overflow: hidden;
    }

目前也有不少开发者使用这种方法。
缺点：不适用于像下拉菜单等内部子元素有定位且超出容器的情况

  • 添加空标签并设置样式clear:both;

    1
    2
    3
    .clearfix{
      clear: both
    }

优点：简洁，浏览器兼容性好
缺点：标签无语义，不提倡！

  • 给浮动元素的父容器添加浮动

    父容器也添加浮动之后，可以清除内部的浮动，但是会影响整体布局。
    缺点：拆东墙补西墙的做法，不提倡

  • 浮动元素后面的元素添加clear属性

    浮动元素什么都不做，给浮动元素后面的元素添加clear属性。
    缺点：高度塌陷的问题还没有解决，没有解决问题的根本——闭合浮动，所以不提倡此方法

总结，目前来看第一种方法是最佳的选择，也是我开发中一直用的方法，不过未来的趋势是流行了这么多年的“浮动+定位”布局会渐渐被“flexbox+grid”布局取代，一起迎接并见证吧！

0%