CSS-使段落文本环绕图像而不带浮动

我可以简单地使用

float

来实现文本环绕

我想知道空白空间是由什么引起的。
这是我的
尝试将图像设置为绝对，然后使用相邻同级选择器在下一段落标记中添加填充，以补偿图像。在这里拉小提琴：

这是CSS

img:first-of-type + p {
  padding-left: 110px;
  display: inline-block;
}

p {
  padding-bottom: 20px;
}

img {
  position: absolute;
  top: 0;
  left: 0;
}

这是非常有创意的，除了这个，我想不出除了float之外还有什么其他选项。
空白的原因可能是缺少
垂直对齐
属性。如果包含
垂直对齐：top
属性，则段落的第一行将移至顶部。唯一的问题是仍然存在空白

这就是我的意思：

CSS

p {
    display: inline;
    vertical-align: top;
}

img {
    display: inline;
    position: absolute;
}
p {
    display: inline-block;
    margin-left: 105px;
    vertical-align: top;    
}

但是，如果您稍微更改
img
和
p
的CSS，则可以在不使用
float
属性的情况下实现
float
效果。唯一的问题是文本不会环绕图像。您必须使用
float
属性来实现这一点

这就是我的意思：

CSS

p {
    display: inline;
    vertical-align: top;
}

img {
    display: inline;
    position: absolute;
}
p {
    display: inline-block;
    margin-left: 105px;
    vertical-align: top;    
}

我不认为有其他CSS解决方案可以包装它而不浮动。您可以绝对定位项目，但它们将并排放置，而不是包装。您可以尝试使用这个jQuery插件包装文本。您甚至可以环绕曲线图像：

正如您所说，您可以通过使用float轻松解决此问题。本文讨论了形状和浮动，因此是一个很好的参考：

因此，如果您只是问是什么导致了空白，那么您真正要问的是浏览器的解析和呈现过程如何与浮动相关。简而言之，虽然标记化和解析比这更复杂，但基本概念仍然是浏览器以从左到右、从上到下的格式在屏幕上呈现输出。因此，如果您将图像标记作为可继承的内联元素放在第一位，它将要求尽可能多的屏幕不动产（在屏幕上渲染）以显示。我们从左到右、从上到下渲染，因此渲染指针结束的最后一个点是图片的右下角。如果将同一树级别上的下一个标记修改为内联，它只知道在图像指针停止的位置继续。指针说，这是我应该开始在段落标记中绘制单词的地方。因为我知道段落标记的默认值，所以我将跳起并渲染一个具有适当高度和宽度的字母

浮动解决了这一问题，因为浮动框位于正常流中，然后从流中取出，并尽可能向左或向右移动。因此，段落应继续呈现位置更改的位置的指针

以下是一些很好的信息来源：
这个问题似乎关注的是为什么而非如何，因此我将重点关注内部工作原理：

CSS 2.1规范的一节描述了：

在内联格式上下文中，框从包含块的顶部开始，一个接一个地水平排列。在这些框之间考虑水平边距、边框和填充框可以不同的方式垂直对齐：底部或顶部可以对齐，或者框内文本的基线可以对齐。包含构成线条的框的矩形区域称为线条框

他们描述的属性是
vertical align
，它采用许多不同的值，
baseline
是默认值。这就是为什么您的两个
inline
元素通过位于基线上而显示的原因。您可以将
更改为
垂直对齐：top
，第一行文本的顶部将与图像的顶部对齐。但是，在第一行文本和下面几行文本之间仍然会有间隙

这是因为文本垂直地将一个行框渲染到下一个行框。无论第一行的行框是否比其他行的行框大，它仍将一次流一个行框。以下是这一概念的可视化：


理解这一点的另一个重要概念是

你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂

您需要使图像内联并浮动，而不是文本。至少从'98年开始，这就是使图像正常工作的方法，可能更早，但我从'98年才开始使用文字处理器。由于某种原因，图像决定了文本流；-）


img{
浮动：左；
显示：内联块；
利润率：10px；
}

你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂

img
默认情况下是
内联块
，而不是
内联块
。这就是为什么你可以在CSS中指定宽度和边距。@DavidThomas谢谢。我不知道
是
内联块
而不是
内联块
。但是，即使我