利用css的clear搞定google广告三面环绕
利用css的clear搞定gg广告三面环绕如此简单，仅仅需要你明白CSS的clear属性即可。主要是利用一个宽为1px的空白层，利用该层的高度控制广告层上下的位置。
这里是道州网在设计网站google广告三面环绕使用到的代码：
<div>
<div style=”float:left;height:300px;width:1px;”>一个宽为1的空白层，利用该层的高度控制广告层上下的位置</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>
<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>//让图片和表格自动处于最底层
<div><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><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>//让图片和表格自动处于最底层
OK，大功告成！