利用css的clear屬性搞定廣告文字環繞效果

是否看見大站的廣告都是放在內容中間實現文字環繞的呢，一般普通小站廣告只能放在內容開頭或結尾，也許大站的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：何為

忘記加上了

有人問要文字上右下都環繞，我改了一下，如下：