图像可以在浮动元素旁边带有文本吗？答案

【问题标题】：Can an image flow with text next to a floated element?图像可以在浮动元素旁边带有文本吗？
【发布时间】：2015-08-09 20:36:41
【问题描述】：

我正在尝试为以下问题找到一个简单的解决方案不使用 JS。

<div class="wrap">
  <p>[...]</p>
  <div class="mpu"></div>
  <img src="img-src">
  <p>[...]</p>
</div>

我有一个带有.wrap 类的容器 div，其中填充了文本。在这里面，我有一个 300px 的方形 div，它的类为 .mpu，它会显示广告。广告单元出现在文本段落之间，并应用了以下样式：

.mpu{
  display: inline-block;
  float: right;
  width: 300px;
  height: 300px;
  margin: 1em -2em 1em 1em;
}

我还有一个标准的 sn-p 用于强制图像在特定宽度下使用视口调整大小：

img{
  max-width: 100%;
  height: auto!important;
}

因此，.mpu 广告单元向右浮动，但也从 .wrap 容器的右侧边缘伸出 2em，因为 margin-right 是负数。容器内的文本在广告块周围整齐地排列，但是，当在广告块旁边插入图像标记时，会在图像出现在其下方时创建一个空白区域。

是否可以像文本一样强制图像在浮动元素周围流动？我知道广告单元应用了浮动，因此已从文档流中删除，因此图像被设置为其父元素宽度的 100%，即.wrap 的宽度。是否有解决方法或咳咳……可以覆盖此行为的黑客攻击？

请参考以下小提琴以获取工作演示：https://jsfiddle.net/7z0yypw1/

【问题讨论】：

jsfiddle.net/7z0yypw1/2 类似的东西？
Img 必须很小？还是？..
啊，应该提到：图像将由编辑人员通过 CMS 添加，他们可以在文档中的任何位置插入图像，因此该解决方案需要适用于不的图像i> 出现在广告单元旁边（即拉伸到容器的整个宽度）以及其他广告单元。
所以靠近广告块的地方一定要小，否则一定要大。对吗？
将图像浮动到左侧。然后文本将换行。我不知道如何解释这一点，但它适用于我，使用 Chrome。 jsfiddle.net/7z0yypw1/3

【解决方案1】：

我认为你想要做的是：https://jsfiddle.net/7z0yypw1/6/

将你的 img 包装在一个 wrapper 元素中，并给它一个 imageWrapper 类。然后申请

.imageWrapper {
    display:block;
    overflow:hidden;
}

【讨论】：

是的！我什至不确定这是如何工作的，但这是解决方案，谢谢！你能解释一下为什么在父元素上设置overflow: hidden 会强制图像调整大小吗？
CSS 2.1 规范对此非常含糊，似乎是一种副作用。对于除可见之外的溢出值，围绕浮点的文本环绕非常难以实现，因此为了避免这些问题，这些会导致块元素形成一个新的块格式化上下文。定义这些是为了避免浮动 - 就像线框一样 - 将宽度减小到剩余空间。事实上，CSS 2.1 只是建议将其作为一个选项，它并不要求浏览器这样做，但似乎这是所有现代浏览器都采用的选项。见w3.org/TR/CSS2/visuren.html#bfc-next-to-float

【解决方案2】：

我会让图像在图像周围有一个很好的边缘浮动。代码如下：

img {
   height:auto;
   max-width: 100%; /* set to what you want */
}

.newimageclass {
    float:left;
}

希望有帮助！

【讨论】：