html - CSS 是否有可能停止环绕 float block 的文本 block block ？

Question

我的问题是我的页面包含许多段落 block ，高度在 2 到 20 行之间。

可以有任意数量的段落，每个段落的高度任意。

使用 HTML5、CSS3、

我最初的目标是将图像添加到这种格式中，左右浮动，文字环绕，这很容易做到。

但是现在，客户希望围绕图像基础的段落保持一致，例如:

(下面的引用键:### = 图像空间/形状/内容)

所以:发生的事情是:

####### <p>text text here for this paragraph
###I### text here for this paragraph line 2
###M### text here for this paragraph line 3</p>
###A### 
###G### <p>text here for paragraph 2
###E### text here for paragraph 2, line 2, etc</p>
####### 
####### <p>text here for paragraph 3 line 1
text here for paragraph 3 line 2,
etc etc. </p>

...

但是:我想要实现的是一种动态的 CSS 方式:

####### <p>text text here for this paragraph
###I### text here for this paragraph line 2
###M### text here for this paragraph line 3</p>
###A### 
###G### <p>text here for paragraph 2
###E### text here for paragraph 2, line 2, etc</p>
####### 
####### <p>text here for paragraph 3 line 1
        text here for paragraph 3 line 2,
        etc etc.</p>

<p>text here for Paragraph 4 states not indented to 
make room text for the image floated left. text.
text text text text</p>

....

因为第 3 段中的 P 标记在图像仍然存在时开始，所以整个段落应该缩进，是否有一种相当动态的方法来实现这一点？

如果我在 CSS 中为段落标签应用任何缩进规则，它们也会缩进没有左侧图像的段落，如第 4 段。

如果我将段落标记设置为内联 block ，我将其作为 SO 上另一个类似问题的解决方案阅读，那么整个段落直到图像之后才会出现，从而破坏了页面流。

如果我不 float 图像，最好的内联方式是什么？我无法保证页面上的图片数量。

我无法在图像图形元素的底部添加填充或边距等空格，因为我不知道段落会持续多长时间。

进一步澄清:我的图像目前处于 float 状态，并且运行良好。

免责声明:我有点累了。晚了。但我想如果这个问题有一个简单的答案，它可能对其他人和我自己都有用，并且可以节省我明天早上挖掘的时间......

PS -> 我无法找到解决方案可能是我无法简明扼要地描述我的问题，如果有关于此问题的简明描述，请告诉我!干杯。

Answer 1

如果将 overflow: auto 添加到 p 元素，它们将形成新的 block 格式化上下文，并且它们的内容将被限制在边界框的边缘段落。

img {
  float: left;
}
p {
  width: 170px;
  overflow: auto;
  }

<img src="http://placehold.it/100x180">
 <p>text here for paragraph 3 line 1
    text here for paragraph 3 line 2,
    etc etc. </p>
 <p>text here for paragraph 3 line 1
    text here for paragraph 3 line 2,
    etc etc. </p>
 <p>text here for paragraph 3 line 1
    text here for paragraph 3 line 2,
    etc etc. </p>
 <p>text here for paragraph 3 line 1
    text here for paragraph 3 line 2,
    etc etc. </p>