我們經(jīng)常看見大站的廣告都是放在內(nèi)容中間實(shí)現(xiàn)文字環(huán)繞的呢，一般普通小站廣告只能放在內(nèi)容開 頭或者結(jié)尾，也許大站的cms系統(tǒng)帶這個(gè)功能吧，我們小站常用cms的基本沒這個(gè)功能，因?yàn)閮?nèi)容標(biāo)簽里面不可能再自動加入一個(gè)廣告標(biāo)簽，除非你添加文章的時(shí)候手動編輯，那不累死。
我也一直沒想到過用css來控制，主要是沒想到這個(gè)clear屬性，今 天偶然看到一個(gè)介紹，才 知道原來實(shí)現(xiàn)文字環(huá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，分 別表示清除兩邊，左邊，右邊的浮動塊。在廣告層加上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> //讓內(nèi)容里面的圖片和表格不會遮到廣告
很遺憾，上面的測試發(fā)現(xiàn)只有 ie可行， firefox和opera還有不同的結(jié)果，ie的效果是圖片遇到廣告層自動下移，firefox是不會下移，但是不會遮住廣告層，因?yàn)閺V告層 在 最前，opera是圖片不會下移，會遮住廣告層，搞笑啊。
再次改進(jìn)：
<style>.news img,.news table {clear:both;position:relative;z-index:-1;}</style> //讓圖片和表格自動處于最底層
終 于可以了，比較 完美了，廣告內(nèi)容環(huán)繞的效果就這樣搞定了：）
忘記加上了 <style>.news{float:left;}</style>
有人問要文字上右下都環(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) 繞</title>
<meta name="keywords" content="css,clear,ggad,文字環(huán)繞" />
<body>
<div style="float:left;">
<div style="float:left;height:200px;width:1px;"><!--一個(gè)寬為1px的空白層，利用該層的高度 控制廣告層上下的 位置。寬為0就不能控制上下了，原因不知道。--></div>
<div style="float:left;height:250px;width:250px;clear:left;background:#F00;margin:25px 5px 5px 0;"><!-- 廣告代碼，firefox和opera還有少量偏差，需要另外調(diào)整，就不寫了，基本可以。 --></div>
<p>新聞內(nèi)容 </p>
</div>
</body></html>
新聞熱點(diǎn)
疑難解答
圖片精選
