利用css的clear屬性搞定廣告文字環(huán)繞效果_Web標(biāo)準(zhǔn)教程

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

是否看見(jiàn)大站的廣告都是放在內(nèi)容中間實(shí)現(xiàn)文字環(huán)繞的呢，一般普通小站廣告只能放在內(nèi)容開(kāi)頭或者結(jié)尾，也許大站的cms系統(tǒng)帶這個(gè)功能吧，我們小站常用cms的基本沒(méi)這個(gè)功能，因?yàn)閮?nèi)容標(biāo)簽里面不可能再自動(dòng)加入一個(gè)廣告標(biāo)簽，除非你添加文章的時(shí)候手動(dòng)編輯，那不累死。

我也一直沒(méi)想到過(guò)用css來(lái)控制，主要是沒(méi)想到這個(gè)clear屬性，今天偶然看到一個(gè)介紹，才知道原來(lái)實(shí)現(xiàn)文字環(huán)繞是如此簡(jiǎn)單。

代碼示例：

<div class="news"> <div style="float:left;height:300px;width:0">一個(gè)寬為0的空白層，利用該層的高度控制廣告層上下的位置</div> <div style="float:left;height:250px;width:250px;clear:left;">廣告代碼</div> </div>

關(guān)鍵在于clear:left的作用，clear有3個(gè)屬性：clear:both，clear:left，clear:right，分別表示清除兩邊，左邊，右邊的浮動(dòng)塊。在廣告層加上clear:left，那么就表示該層相對(duì)于空白層來(lái)說(shuō)不浮動(dòng)了，就往下移動(dòng)了，太妙了，哈哈。

我們來(lái)比較一下：

<div class="news"> <div style="float:left;height:300px;width:100px;background:#CCC;">給他加上寬度和背景便于觀察效果</div> <div style="float:left;height:250px;width:250px;">去掉了清除浮動(dòng)，你就明白了它的意義</div> </div>

如果再加上這樣一條：

<style>.news img,.news table{clear:both;}</style> //讓內(nèi)容里面的圖片和表格不會(huì)遮到廣告

很遺憾，上面的測(cè)試發(fā)現(xiàn)只有ie可行，firefox和opera還有不同的結(jié)果，ie的效果是圖片遇到廣告層自動(dòng)下移，firefox是不會(huì)下移，但是不會(huì)遮住廣告層，因?yàn)閺V告層在最前，opera是圖片不會(huì)下移，會(huì)遮住廣告層，搞笑啊。

再次改進(jìn)：

<style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //讓圖片和表格自動(dòng)處于最底層

終于可以了，比較完美了，廣告內(nèi)容環(huán)繞的效果就這樣搞定了：）

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

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

有人問(wèn)要文字上右下都環(huán)繞，我改了一下，如下：

<!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廣告文字環(huán)繞 - by:hewei.org</title> <meta name="keywords" content="css,clear,ggad,文字環(huán)繞" /> <meta name="description" content="利用css的clear屬性搞定gg廣告文字環(huán)繞，by:hewei.org" /> <body>

</div>
</body>
</html>