清除浮动的几种方法

清除浮动的几种方法:

  1父元素加float

  2父元素加overflow:hidden

  3给子元素最后加1个空div,并clear:both

  4利用给父元素加.clearfix类清除

/*第一种clearfix方法 有时候会出现一些bug,第2种方法可以解决*/
.clearfix::after,.clearfix::before {
    display: table;
    content:"";
}
.clearfix::after {
    clear: both;
}
.clearfix {
    *zoom:1 ;/*IE/7/6*/
}
/*第二种clearfix方法*/
.clearfix {
    zoom: 1;
    display: table;
  /*可以添加100%继承父元素防止元素内容收缩*/ }

  5.利用BFC特性清除浮动影响

利用display:table都是让元素具有了BFC特性,相当于建立了一个新的块级格式化上下文,把当前元素包含并与其他元素隔离,具有BFC特性的元素里的内部元素与外部元素互不影响

BFC的一些作用:1.可以解决父元素在子元素浮动情况下高度坍塌的问题2.解决外边距重叠

形成BFC的方法有下面几种:

  1.float的值不为none。
  2.overflow的值不为visible。
  3.display的值为table-cell, table-caption, inline-block中的任何一个。
  3.position的值不为relative和static。

原文地址:https://www.cnblogs.com/zmshare/p/6121601.html