常见清除浮动方法总结

常见清除浮动方法总结

一、设置父元素高度（height）

内容经常会改动（即元素高度不固定），但父级高度固定的话。
缺点：扩张性不好！

二、父元素也设置浮动

缺点：margin左右自动失效

三、给父元素设置内联（inline-block）

缺点：margin左右自动失效

四、父容器内增加空标签

缺点：IE6 最小高度 19px；（解决后(font-size: 0;)IE6下还有2px偏差）

（<div class='clear'></div>）

五、< br / > 清除浮动

<br clear = 'all' />

六、after伪类清除浮动（主流方法）

.clearfix:after { //after伪类：元素末尾添加内容  IE6/IE7不支持after伪类，如下添加zoom    content: '',    display: block,    clear: both}.clearfix {    zoom: 1 // 触发IE下haslayout，使元素根据自身容器计算宽高}

七、给父级元素添加overflow（auto或hidden）

需要配合宽度或者zoom兼容IE6/IE7