使用溢出和 pie-clearfix 清除修复问题

Question

我正在尝试浮动一些元素并应用 clearfix，以便父元素可以扩展到子元素的高度和宽度。

所以，我只是按照这个小提琴设置布局：http://jsfiddle.net/fMjEx/

然后我想在.bar 中浮动元素。这通常很简单：

1. 浮动元素。
2. 使用pie-clearfix 或overflow: auto 清除修复父级。

但是，我遇到了这些问题：

• 如果我使用 pie-clearfix，.bar 旁边的元素 .picture 也包含在清除中：http://jsfiddle.net/6C7WD/

• 如果我使用overflow: auto 或overflow: hidden，.bar 的宽度不再跨越文档的宽度：http://jsfiddle.net/fv2gA/

最初，我的一个解决方案是创建.picture position: absolute。然而，这种方法的问题是元素被从流中取出。

在布局中，.bar 的高度根据里面的内容是可变的。我想给.bar 和.picture 一个margin-bottom，以便根据.bar 或.picture 是否具有更高的高度，将它们之后的任何东西向下推。

这排除了在.picture 上使用position: absolute 作为解决方案。

有没有满足以下条件的解决方案？

• 仅清除 .bar 内的浮动。
• 不从流中删除任何元素。

Answer 1

这是我最终得到的解决方案：

为标记添加了一个包装器：

<div class="container">

<div class="group"> <-------------------------- This is the wrapper
    <div class="picture"></div>
    <div class="bar">
        <div class="info"> some text goes here</div>
        <div class="buttons">some other content goes here</div>
    </div>
</div>
</div>

还有 CSS：

.picture{
    width: 100px;
    height: 100px;
    float: left;
    background: green;
    margin-left: 100px;
    margin-top: 10px;
    z-index: 2;
    position: relative;
}

.bar{
    background: blue;
    margin-top: -80px;
    overflow: auto;
    width: 100%;
    float: left;
    z-index: 1;
    position: relative;
}

.group{
    margin-bottom: 10px;
}

.group:after {
    clear: both;
    content: "";
    display: table;
}

.info, .button{
    float: left;
    margin-left: 200px;
}

.container{
    overflow: auto;
}

上面的小提琴：http://jsfiddle.net/c6Lng/