如何使用css制作文字环绕效果

时间：2021-05-02

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

翔宇亭 IT乐园---提供电脑技术文章|变成技术|办公技巧|网页设计技术|数据库技术|网络技术|幽默笑话|搞笑动画|搞笑事频|爆笑网文 |励志文章|绕口令|歇后语|脑筋急转弯|智利快车

我也一直没想到过用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是图片不会下移，会遮住广告层，搞笑啊。

再次改进：

<style>.news img,.news table {clear:both;position:relative;z-index:-1;}</style> //让图片和表格自动处于最底层

终 于可以了，比较 完美了，广告内容环绕的效果就这样搞定了：）

忘记加上了 <style>.news{float:left;}</style>

有人问要文字上右下都环绕，我改了一下，如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://），转载请保留此信息！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章