我的问题是我有一个有很多段落块的页面，高度在2到20行之间。
可以有任意数量的段落，每个段落的高度都是任意的。
使用HTML5，CSS3，
我最初的目标是将图像添加到这种左右浮动的格式中，并将文本环绕起来，这样做很容易。
但现在，客户希望围绕图像底部的段落保持一致，以尝试并举例：
（参考下面的键：35;=图像空间/形状/内容）
所以：
结果是：
####### <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段那样没有左侧图像的段落。
如果我把段落标记内联块作为另一个类似问题的解决方案，那么整个段落直到图像之后才会出现，从而破坏了页面流。
如果我不浮动图像，最好的内联方法是什么？我不能保证页面上的图片数量。
我不能在image figure元素的底部添加诸如padding或margin之类的空格，因为我不知道这些段落将持续多长时间。
进一步澄清：我的图片目前是浮动的，工作完美。
免责声明：我有点累了。天晚了。但我想，如果这个问题有一个简单的答案，它可能对其他人和我自己都有用，并将节省我的挖掘时间明早…
PS->我找不到解决方案，也许我无法简明地描述我的问题，如果有这个问题的简明描述，请告诉我！干杯.
最佳答案
如果将overflow: auto添加到p元素，它们将形成新的块格式上下文，并且其内容将被约束到段落的边框边缘。
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>