Css 清除溢出和饼图清除修复问题

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

因此，我只是按照这把小提琴设置布局：

然后我想在

.bar

中浮动元素。这通常是非常直接的：

浮动元素

使用

pie clearfix

或

overflow:auto

清除修复父级

但是，我遇到了以下问题：

• 如果我使用pie clearfix，则

  .bar

  旁边的元素

  .picture

  也包括在清除中：

• 如果使用

  overflow:auto

  或

  overflow:hidden

  ，则

  .bar

  的宽度不再跨越文档的宽度：

最初，我有一个解决方案，就是把

.picture

定位为：绝对。然而，这种方法的问题是，元素被从流中取出

在布局中，
.bar
的高度根据内部内容而变化。我想给
.bar
和
.picture
一个
页边距底部
，这样在它们之后的任何东西都会被向下推一个量，这取决于
.bar
还是
。picture
的高度更高

这排除了使用
.picture
上的
position:absolute
作为解决方案的可能性

是否有满足以下要求的解决方案


清除仅在
.bar
内浮动
不会从流中删除任何元素
这是我最终得到的解决方案：

向标记中添加了包装：

<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>

以上几点：

.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;
}