关于float文字环绕的问题？(BFC方法)

Question

.in .out1 .out2 能否环绕取决于是否超过.imgbg的高度，
怎样在不使用float：right和position情况下，只是用BFC实现imgbg在左，文字在右的效果。

<div>
    <div class="imgbg"></div>
    <p class="in">内部的文字环绕1</p>
</div>
<div class="out1">外部的文字环绕1</div>
<div class="out2">外部的文字环绕2</div>

.imgbg{
    background:red;
    float:left;
    width:50px;
    height:50px;  
    margin-right:20px;
}
.in{
    background:blue;
}
.out1{
    background:orange;
}
.out2{
    overflow:hidden;
    background:yellow;
    height:100px;
}

Answer 1

那就是左边图片加float:left，右边的文字只要加上控制文字的行高line-height就行了，整体的宽度也要控制一下，就是楼上想要的效果，图片上再加上右边距和下边距就可以和文字有一些空隙了