CSS div扩展以适应图像

我使用下面的代码创建了两个div，一个大的灰色div，还有一个在右边有一个图像。代码运行良好，但两个div都没有扩展到图像的结尾。。。我怎样才能解决这个问题

<style>
div.div1 {
background-color: #F1F1F1;
border: 1px solid #CCCCCC;
padding: 10px;
}
div.div2 {
background-color: #e2d8ba;
border: 1px solid #000000;
padding: 10px;
text-align: justify;
}
</style>
<div class="div1">
<div class="div2">
<img src="http://www.dailyrecoverymeditations.com/forums/image.php?u=2057&dateline=1404850818" style="float:right; padding-left: 10px;">
Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing</div>
</div>

第1分部{
背景色：#f1f1；
边框：1px实心#中交；
填充：10px；
}
第2分部{
背景色：#e2d8ba；
边框：1px实心#000000；
填充：10px；
文本对齐：对齐；
}
测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试

由于图像是浮动元素，请添加

溢出：自动到两个div：


div.div1{
背景色：#f1f1；
边框：1px实心#中交；
填充：10px；
溢出：自动；
}
第2分部{
背景色：#e2d8ba；
边框：1px实心#000000；
填充：10px；
文本对齐：对齐；
溢出：自动；
}

测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试
当您浮动一个元素时，您就可以。如果希望父元素扩展以适应浮动元素的高度，则需要实现“clearfix”以“clear”浮动。您可以在这里阅读有关浮动的所有信息-

清除浮动有很多技术，所以我添加了一个作为
.clearfix
类，您可以在任何具有浮动子级的父级上使用



.clearfix:之后{
内容：“；
显示：表格；
明确：两者皆有；
}
第1分部{
背景色：#f1f1；
边框：1px实心#中交；
填充：10px；
}
第2分部{
背景色：#e2d8ba；
边框：1px实心#000000；
填充：10px；
文本对齐：对齐；
}
测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试
在众多选项中，一个是使用属性

关于这个问题：

div不会延伸到图像结束的位置

当父元素给定一个
表格
显示时，它将被呈现为一个表格，并基于子元素进行缩放

下面是示例代码段：


div{
填充：10px；
显示：表格；
}
第1分部{
背景色：#f1f1；
边框：1px实心#中交；
}
第2分部{
背景色：#e2d8ba；
边框：1px实心#000000；
文本对齐：对齐；
}
div.div2>img{
浮动：对；
左侧填充：10px；
}

测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试

/*CSS*/
div.div2 {
    overflow: auto;
}

/*OR*/
div.div2 {
    display: inline-block;
    width: 100%;
}