包裹在图象附近的词使用浮游物

Question

有人可以帮我解决我的问题吗？我试图浮动.imgfloat，以便p.lead环绕它。这是代码

<article>
       <div class="imgfloat">
       </div>
       <p class="lead">To continue our visual clues about editable and non-editable 
        regions, give the second row a slightly lighter gray background (since it is 
        editable, but only in the 1st-level template), and the nested table a white 
        background (since it's editable in both). 2nd_level_template.dwt should now
        look something like Figure 5.To continue our visual clues about editable and
        non-editable regions, give the second row a slightly lighter gray background 
        (since it is editable, but only in the 1st-level template), and the nested
        table a white background (since it's editable in both). 2nd_level_template.dwt
        should now look something like Figure 5.
        </p>
</article>

CSS

article p{
    text-align:left;
    float:left;
}

.imgfloat{
    float:right;
    height:200px;
    width:300px;
    background-color:#ccc;
}

但结果是这样的：

Answer 1

不要浮动文本。

通过从float:left中删除article p，文本将自然地环绕img元素，该元素会浮动，从而从流中删除。

EXAMPLE HERE

article p {
    text-align:left;
}
.imgfloat {
    float:right;
    height:200px;
    width:300px;
    background-color:#ccc;
}