display: -webkit-box 导致文本环绕图片失效

`display: -webkit-box` 是Webkit内核（如Safari和早期版本的Chrome）支持的一种CSS布局模式，它主要用于创建响应式的单列或多列网格布局。当将文本和图片设置为 `-webkit-box` 属性，并期望文本围绕图片排列时，如果图片设置了固定的宽度或高度，并且文字尝试填充整个可用空间，可能会导致文字没有正常地绕着图片布局。

这是因为 `-webkit-box` 默认采用 `line-box` 对齐策略，这意味着行盒元素（包括图片和文本）会尽可能保持在它们各自的框里，而不是像标准的 `flexbox` 或者 `grid` 那样自动调整内容在容器内的位置。所以，若想实现文本流畅地环绕图片，通常推荐使用 `display: flex` 或 `display: grid` 而不是 `-webkit-box`。

如果你想要文本围绕图片，可以考虑这样做：

.container {
  display: flex; /* 或 display: grid; 根据需求 */
}

.item {
  flex-wrap: wrap; /* 或 grid-wrap: wrap; */
  align-items: center; /* 图片居中 */
}

在这个例子中，`.container` 设置为弹性布局，`.item` 中的文本和图片可以在需要时换行并保持对齐。