总结清浮动的七种方式

方式一:父元素设置高度

height:200px

方式二:父级也浮动,但可扩展不好,有可能造成整个页面所有的元素的浮动

float:left(right)

方式三:父级设置display:incline-block;

存在的问题是:

1.IE   6   不支持display:incline-block;

2.display:incline-block;本身可能会让元素底部存在大约4像素的控件间距

方式四:使用br标签结合clear属性清浮动

存在的问题:1.这种方式违背了标签与样式相分离的原则

2.br标签在wrap中没有其他子元素时也会有高度

<br clear="all">

方式五   空标签, 但是在IE6中空标签也有默认的19px左右的高度

.clearFlat{

        clear:both;

}

<div class="clearFlat"></div>

 

方式六:给父元素设置overflow:hidden;属性,经常用的一种清浮动的方式,本质是触发了BFC,进而实现的清浮动效果.      IE6中使用该属性时,往往需要结合zoom属性或者设置自身高度配合使用

注意.firefox(火狐)浏览器,不支持zoom属性.

overflow:hidden;

 

方式七:通过after伪元素选择器实现清浮动

.wrap:after

{

content:'';

display:block;

clear:both;

 

width:0;

height:0;

visibility:hidden;

}

.wrap{

zoom:1

}