利用css的clear属性搞定广告文字环绕效果

整理日期：2008年05月26日【字体：大中小】

　　是否看见大站的广告都是放在内容中间实现文字环绕的呢，一般普通小站广告只能放在内容开头或者结尾，也许大站的cms系统带这个功能吧，我们小站常用cms的基本没这个功能，因为内容标签里面不可能再自动加入一个广告标签，除非你添加文章的时候手动编辑，那不累死。

　　我也一直没想到过用css来控制，主要是没想到这个clear属性，今天偶然看到一个介绍，才知道原来实现文字环绕是如此简单。

　　代码示例：

<div class="news">
　　<div style="float:left;height:300px;width:0">一个宽为0的空白层，利用该层的高度控制广告层上下的位置</div>
　　<div style="float:left;height:250px;width:250px;clear:left;">广告代码</div>
</div>

　　关键在于clear:left的作用，clear有3个属性：clear:both，clear:left，clear:right，分别表示清除两边，左边，右边的浮动块。在广告层加上clear:left，那么就表示该层相对于空白层来说不浮动了，就往下移动了，太妙了，哈哈。

　　我们来比较一下：

<div class="news">
　　<div style="float:left;height:300px;width:100px;background:#CCC;">给他加上宽度和背景便于观察效果</div>
　　<div style="float:left;height:250px;width:250px;">去掉了清除浮动，你就明白了它的意义</div>
</div>

　　如果再加上这样一条：

　　<style>.news img,.news table{clear:both;}</style>　　 //让内容里面的图片和表格不会遮到广告

　　很遗憾，上面的测试发现只有ie可行，firefox和opera还有不同的结果，ie的效果是图片遇到广告层自动下移，firefox是不会下移，但是不会遮住广告层，因为广告层在最前，opera是图片不会下移，会遮住广告层，搞笑啊。

　　再次改进：

伊图教程网[www.etoow.com]
http://www.etoow.com/html/2008-05/1211807367.html

Tags：

利用css的clear属性搞定广告文字环绕效果
'http://www.etoow.com/html/2008-05/1211807367.html

最新文章教程