CSS中的清除浮动全总结

清除浮动

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

清除浮动方法：

• 目前最主流的方法：clearfix

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

• overflow:hidden;或overflow:auto;
  父容器会形成BFC。

  .clear{
    overflow: hidden;
  }

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

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

  .clearfix{
    clear: both
  }

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

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

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

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

本文首发在个人博客yoowin.me，欢迎访问。