html清除浮动有几种方法,HTML中清除浮动的几种方法

清除float的常见几种方式：

清除浮动方法(1)在浮动元素后面使用一个空的自身清除浮动的元素。

例如

实例：清除容器中子元素的浮动，让父元素塌陷的高度恢复。

CSS代码：

.content{

width:100px;

border:1px dotted red;

}

.div-test{

width:100px;

height:100px;

border:1px dotted black;

}

.son{

margin:5px;

width:40px;

height:40px;

background:blue;

float:left;

}

在类为son的div左浮动的情况下，容器div高度塌陷。

在浮动元素后面使用一个空的自身清除浮动的元素。

清除浮动样式后的效果：

清除浮动后的效果

清除浮动方法(2)给浮动元素的容器添加overflow:hidden;的属性和赋值。

在示例中需要给类为content的div元素添加overflow:hidden;其中设置zoom:1;为兼容IE6/7，触发hasLayout属性。

.content{

width:100px;

border:1px dotted red;

/*增加清除浮动的代码*/

overflow:hidden;

zoom:1;

}

.div-test{

width:100px;

height:100px;

border:1px dotted black;

}

.son{

margin:5px;

width:40px;

height:40px;

background:blue;

float:left;

}

清除浮动方法(3)通过CSS3的：after伪元素。

通过：after伪元素设置样式来实现浮动清除，是时下最为流行的清除浮动方式。它实现的原理与方法(1)一样，效果也可以一样。但是借助:after微元素设置样式，不需要在HTML代码上额外增加元素。

CSS代码：

.content{

width:100px;

border:1px dotted red;

}

.div-test{

width:100px;

height:100px;

border:1px dotted black;

}

.son{

margin:5px;

width:40px;

height:40px;

background:blue;

float:left;

}

/*此处设置清除浮动代码*/

.content:after{

content:".";

display:block;

height:0;

visibility:hidden;

clear:both;

}

.content{zoom:1;}

这里设置zoom:1;同样是为兼容IE6/7，触发hasLayout属性。

清除浮动方法(4)设置容器元素高度height，只适合高度固定的布局。

清除浮动方法(5)容器元素也设置浮动。不推荐，会产生新的浮动问题。