隐藏溢出而不清除浮动元素答案

【问题标题】：Hide overflow without clearing floated element隐藏溢出而不清除浮动元素
【发布时间】：2014-08-19 18:44:40
【问题描述】：

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

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

我了解为什么会发生这种情况，但我一直在试图找出一种方法来获得预期的效果，但无济于事。请参阅下面的所需效果。

我尝试了各种方法，例如将图像与 div 并应用overflow: hidden，但我似乎无法让它工作。

我确信答案正盯着我看，但我只是没有看到它。

我已经为您上传了我的代码到JSfiddle（图片要小得多，因此您可以在结果窗口中看到效果）

提前致谢。

【问题讨论】：

标签： html css overflow

【解决方案1】：

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

【讨论】：

我确实尝试过这样的事情，但是我担心在这样做时我需要使用 JavaScript 来计算响应时标题左侧的填充。我会记住这一点，谢谢。

【解决方案2】：

如果你知道图片的宽度，你可以这样做：http://codepen.io/pageaffairs/pen/EcJAK

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.banner {
    margin-top: 35px;
    background: #f00;
    overflow: hidden;
    position: relative;
}

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

.caption {
    margin-left: 230px;
    padding: 20px;
    font-size: 14px;
}

</style>
</head>
<body>

<div class="banner">
    <div class="image">
        <img src="http://placehold.it/220x300" alt="" />
    </div>
    <div class="caption">
        <h2>Lorem ipsum dolor sit amet.</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores dicta est, iure libero molestias pariatur. Aperiam aut autem consequatur, deleniti et eum minus nihil perspiciatis provident qui repellendus veniam voluptatem. Aliquid assumenda atque consequatur cumque nesciunt sequi. Adipisci autem cumque iste itaque laudantium necessitatibus optio possimus quam sint vero!</p>
    </div>
</div>

</body>
</html>

【讨论】：

【解决方案3】：

您可以选择 2 个选项：

1 .将浮动应用于图像的 DIV 而不是图像本身，并将 DIV 的高度限制为所需的最小高度。

例子：

    .image{ float:left; height:1px; }

JSfiddle 示例：http://jsfiddle.net/z3zfx7uv/

2 。完全摆脱图像，它是 DIV 并使用 background-image 代替，并带有适当的 padding-left。

例子：

    .banner {
        margin-top: 35px;
        background: #f00 url(http://placehold.it/220x300) top left no-repeat;
        overflow: hidden;
        padding-left:220px;
    }

JSfiddle 示例：http://jsfiddle.net/b6zzbowh/

【讨论】：