清除浮动的几种方法:
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。