900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 标签增加CSS的overflow属性来清除浮动

标签增加CSS的overflow属性来清除浮动

时间:2020-10-09 10:42:43

相关推荐

标签增加CSS的overflow属性来清除浮动

下面小编要向大家介绍下标签增加CSS的overflow属性来清除浮动,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

这个方法不单使用简单,而且FF、OP、IE7都支持,从此可以告别那又长兼容性又差的FF清浮动的方法了。

方法真的很简单,只要为需要清浮动的标签加上overflow这个属性。

ul{

;

;

adding:0;

background-color:#436973;

}

li{

;

;

;

background-color:#83B1DF;

}

.demo{

;

solid #FF00FF;

;

}

.overflow{

;

zoom:1;

background-color:#43FF73;

}

ul{

;

;

margin:0;

padding:0;

background-color:#436973;

}

li{

;

;

;

background-color:#83B1DF;

}

.demo{

;

solid #FF00FF;

;

}

.overflow{

;

zoom:1;

background-color:#43FF73;

}

HTML代码

div class="demo"

ul class="overflow"

li1/li

li2/li

li3/li

li4/li

li5/li

li6/li

li7/li

li8/li

li9/li

/ul

/div

div class="demo"

ul

li1/li

li2/li

li3/li

li4/li

li5/li

li6/li

li7/li

li8/li

li9/li

/ul

/div

其中zoom是为了IE6准备的。

注:忘了一个很重要的内容,并不是所有的overflow属性都可起来一样的效果,比如visible属性就只能对IE起作用。这样的话就有一个问题啦,如果要有高度,而且内容超出高度的时候,定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案:对于IE6及以下版本的IE,可以直接定义高度;对于IE7、FF、OP,可定义min-height。

CSS代码

overflow

{

;

_height:200px;

;

;

zoom:1;

_overflow:visible;

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。