IE与Firefox下对CSS定义div高度的解析问题

问题：
IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度

Firefox：没有定义高度时，如果内容中包括了图片内容，MF的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的 情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。

解决方法：
<div class="main">
<div class="content">
</div>
</div>
css-----------
.main{width: 150px; background-color: #ffff66;padding:10px 0 0 0;}
.content{width: 140px;height: 50px; background-color: #00ff33;float: left;}
在IE中显示正常，但是在 Firefox中外面的层不能自动适应内层的高度。（为了在Firefox中显示部分外层背景，我加入了10px 0 0 0;）
修改方法1：（添加新层）
<div class="main">

<div class="content">

</div>
<div style="clear: both;display:block;">

</div>
修改方法2：（修改css）
.main{width: 150px; background-color: #ffff66;padding:10px 0 0 0;float: left;}

.content{width: 140px;height: 50px; background-color: #00ff33;float: left;}
（备注：在IE7,Firefox3.0.1中测试通过）