css - 由于先前 float 的 div，Div 获取未知和不需要的高度

Question

假设我有一个博客，我希望侧边栏向右浮动(固定宽度)， slider + 内容向左不 float (流动)并且侧边栏和 slider + 内容之间有一点间隙。

因此，为了实现这一目标，我做了你会发现的事情。

问题是，我在内容中有一个 float 的 a 标签，所以我在它的容器(article 标签)上使用了一个 clearfix ).

但是突然之间，article 变得很大，并且随着我向 .sidebar< 添加一些东西(例如更多 .widgets)，它会变得越来越大。/.

这是怎么回事？我怎样才能防止这种情况发生？如果我无法阻止这种行为，我如何才能实现相同的流体 + 固定布局？

http://jsfiddle.net/wjVDX/

THE HTML
------------
<div class="container clearfix">
    <div class="slider">
    </div>
    <div class="sidebar">
        <div class="widget"></div>
        <div class="widget"></div>
        <div class="widget"></div>
        <div class="widget"></div>
        <div class="widget"></div>
        <div class="widget"></div>
        <div class="widget"></div>
    </div>
    <div class="content">
        <article class="clearfix">
            <a href="#"><img src="http://lorempixel.com/50/50/" alt="" /></a>
            <p>This is NOT what I want</p>
        </article>
    </div>
</div>

THE CSS
------------
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

img {
    max-width: 100%;
}

.container {
    width: 50%;
    margin: 0 auto;
    background-color: rgba(0,0,0,.2);
    position: relative;
    padding: 10px;
}

.slider {
    height: 50px;
    background: red;
    margin-right: 70px; /* 60px from the .sidebar + 10px margin */
}

.sidebar {
    width: 60px;
    background: blue;
    float: right;
    position: relative;
    top: -50px; /* Height of .slider */
    margin-bottom: -50px; /* To compensate for the position: relative; */
}

.widget {
    background: yellow;
    height: 30px;
    margin-bottom: 5px;
}

.content {
    background: green;
    margin-right: 70px; /* 60px from the .sidebar + 10px margin */
}

.content article {
    background: pink;
}

.content article a {
    display: block;
    float: left;
    margin-right: 5px;
}

.content article p {
    line-height: 20px;
    background: brown;
}

Answer 1

正如您在此 JSFiddle 中看到的那样, 添加

overflow:hidden;

.content 应该做你要求的。

编辑:lawnlanders 拥有它。