CSS中使用float出现奇怪问题

有如下html代码：
<div id="aa">
<div id="bb">
......
</div>
</div>
css代码如下：
#bb{float: left;}
理想的效果是，bb的高度增加，aa的高度也会随着bb一同相应的增加。这样设置在IE下没问题，可是在FireFox下，假如增加aa高度，aa就会飘出bb层,难道要用JS？经过多次修改尝试之后终于找到解决方法：可以在所有浮动层之后加上这个“清理层",
<div class="clean"></div>
.clean{
display: block;
clear: both;
margin: 0px;
padding: 0px;
visibility: hidden;
}
.clean:after {
height: 0px;
}