html - overflow hidden 而不清除 float 元素

Question

我有一个图像 float 在横幅区域的左侧，它比我想要的横幅高，这是为了在不切断图像的情况下为文本增长留出空间。

当我将 overflow: hidden 应用到 .banner 时，横幅会清除图像而不是将其切断。

我理解为什么会发生这种情况，但我一直在努力寻找一种方法来获得预期的效果，但无济于事。请参阅下面的预期效果。

我已经尝试过各种方法，比如将图像与 div 放在一起并对其应用 overflow: hidden 但我似乎无法让它工作。

我确信答案就在眼前，但我只是没有看到。

我已将我的代码上传到 JSfiddle为您(使用更小的图像，以便您可以在结果窗口中看到效果)

提前致谢。

Answer 1

在这里我更新了你的JSFiddle这样你就可以看到结果了。您必须使用 position: absolute; 从 Textflow 中取出图像。有了这个，如果文本不够高无法显示全部，图像就会被截断。