在IE和Firefox中背景图片高度自适应的兼容问题

在IE和Firefox中背景图片高度自适应的兼容问题

例如：(其中floatA、floatB的属性已经设置为float:left;)
<#div id="floatA" ></#div>
<#div id="floatB" ></#div>
<#div id="NOTfloatC" ></#div>
这里的NOTfloatC并不希望继续平移，而是希望往下排。
这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。
在
<#div class="floatB"></#div>
<#div class="NOTfloatC"></#div>
之间加上
<#div class="clear"></#div>
这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
并且将clear这种样式定义为为如下即可：
.clear{
clear:both;}
此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;

#main{background:url(images/main_bg.jpg) repeat-y top left;width:996px;height:auto;overflow:hidden}
.content{float:left;padding:0 20px 5px 132px;width:505px;border:1px solid #FF0000;}
.sidebar{float:right;padding-right:132px;width:196px;border:1px solid #0000FF;}

其中不加这overflow:hidden句，在IE中能自动适应背景图片的高度，但是在FF中不能自动适应背景图片的高度，显示的是背景颜色，但是加了这句就可以实现在FF中也自动适应背景图片，即背景随文本内容的增加而自动增加