html - 在图像上 float 文本而不环绕在下面

Question

我有一段文字与 float 图像相对；有没有一种方法可以让文本靠在图像侧面形成的边框上，但当文本流过图像底部时不在其下方？

CSS:

.textChunk {
  font-family: 'Special Elite', cursive;
  font-size: 20px;
  display: block;
  float: none;
  clear: both;
}

.leftPic {
  max-width: 35%;
  max-height: 35%;
  margin-right: 10px;
  float: left;
}

HTML

<div class="textChunk">
    <img class="leftPic" src="images/joshFace.png">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

Answer 1

尝试将 overflow: auto 设置为段落:

.textChunk p { overflow: auto; }

这会导致创建一个新的 block 格式化上下文，并且 block 的左边缘不会超出 float 的边缘(即环绕)。

参见演示:http://jsfiddle.net/audetwebdesign/tPC4z/