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

作者：何为来源：hewei.org 时间：2008-05-24 13:48:00　

是否看见大站的广告都是放在内容中间实现文字环绕的呢，一般普通小站广告只能放在内容开头或者结尾，也许大站的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是图片不会下移，会遮住广告层，搞笑啊。

再次改进：

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

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

//2008-02-29，修改by：何为

忘记加上了

<style>.news{float:left;}</style>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=GB2312" /><title>利用css的clear属性搞定gg广告文字环绕 - asp之家</title><meta name="keywords" content="css,clear,ggad,文字环绕" /><meta name="description" content="利用css的clear属性搞定gg广告文字环绕，by:hewei.org" /><body><div style="float:left;"><div style="float:left;height:200px;width:1px;"></div><div style="float:left;height:250px;width:250px;clear:left;background:#F00;margin:25px 5px 5px 0;"></div> <p>新闻内容</p></div></body></html>

标签：clear,文字,广告,效果,css

投稿

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

猜你喜欢

阿里巴巴工程师分享MySQL经验

Python实现拼接多张图片的方法

PL/SQL数据类型及操作符

Go gRPC进阶教程gRPC转换HTTP

基于Python实现火车票抢票软件

Go语言TCP从原理到代码实现详解

解决Js先触发失去焦点事件再执行点击事件的问题

JS仿Windows开机启动Loading进度条的方法

Python THREADING模块中的JOIN()方法深入理解

Python 深入理解yield

Centos7 mysql数据库安装及配置实现教程

mysql8创建、删除用户以及授权、消权操作详解

Python解析m3u8拼接下载mp4视频文件的示例代码

Python3实现的字典、列表和json对象互转功能示例

IE和Firefox下event事件杂谈

c++生成dll使用python调用dll的方法

“你帮我把这个做成这个样子！”—当我听到这句话

JS循环中正确使用async、await的姿势分享

Python实现Event回调机制的方法

Vue结合Video.js播放m3u8视频流的方法示例