CSS清除浮动

  今天整理前端材料的时候看到了清除浮动这一块,没想到学问还挺多的,这里总结一下。

  清除浮动常见的是三种方法:1、添加空白div法;2、overflow法;3、clearfix法,下面分别说一下:

  1、这种方法是指在需要清除浮动的父元素的底部添加一个元素,并设置样式为:clear:both;不过由于此法在有些情况下会带来大量空白元素,故不是很建议。

  2、这种方法的原理是给浮动元素的父元素设置overflow:auto或者overflow:hidden样式,不过由于存在兼容性问题,此法还是不太推荐。

  3、比较推荐的方法是这种,即clearfix法。有些人会觉得此法过于麻烦,不过参照高人的解决办法,此法也可以很简单,如下:

  给需要清除浮动的元素添加group类,group类的定义为:

  .group{*zoom:1;}

  .group:before,.group:after{content:"";display:table;}

  .group:after{clear:both;}

  

原文地址:https://www.cnblogs.com/tengzhouboy/p/2969241.html