DIV的高度自适应及注意有关问题

一、高度的自适应（父div高度随子div的高度改变而改变）

1、如果父div不定义height、子div均为标准流的时候，父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。

代码：
<style?type="text/css">
?????#aa{?border:#000000?solid?5px}
?????#bb{border:#00ffff?solid?5px;}
?????#cc{?border:#0033CC?solid?5px}
</style>
<div?id="aa">父div
???? <div?id="bb">子div</div>
???? <div?id="cc">子div</div>
</div>

效果：ie、FF下一致??????????

?

?

2、如果父div定义height,子div均为标准流的时候，在IE下父div的height随内容变化而变化，ff中则固定大小，如父div设置height:50px

代码：
<style?type="text/css">
????#aa{?border:#000000?solid?5px;height:50px}
????#bb{border:#00ffff?solid?5px;}
????#cc{?border:#0033CC?solid?5px}
</style>
<div?id="aa">父div
????<div?id="bb">子div</div>
????<div?id="cc">子div</div>
</div>

ie效果???????????
FF下效果???

?

3、如果子div使用了float属性，此时已经脱离标准流，父div不会随内容的高度变化而变化，解决的办法是在浮动的div下面，加一个空div，设置clear属性both

?

未加空div代码：?
<style?type="text/css">
????#aa{?border:#000000?solid?5px;}
????#bb{border:#00ffff?solid?5px;float:left}
????#cc{?border:#0033CC?solid?5px;float:left}
</style>
<div?id="aa">父div
????<div?id="bb">子div</div>
????<div?id="cc">子div</div>
</div>

IE效果：????????????? FF效果：????

修改后代码：
<style?type="text/css">
????#aa{?border:#000000?solid?5px;}
????#bb{border:#00ffff?solid?5px;float:left}
????#cc{?border:#0033CC?solid?5px;float:left}
</style>
<div?id="aa">父div
????<div?id="bb">子div</div>
????<div?id="cc">子div</div>
???<div?style="clear:both"></div>?
</div>
修改后效果： IE FF一致

二、高度的自适应（子div高度随父亲div高度改变而改变）

在有边框的情况下，你会发现同一个div,在ie下的高度和在FF下的高度是不一样的，比如你设置了高度为100px的div，边框是border:5px;IE的高度是5+5+空白区域=100px，而FF下高度是100px的div是不包括高度的，只是空白区域的高度，如下图黑框的部分: