Question

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

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

然后我想将元素浮动到.bar中。这通常很直接：

浮动元素。
使用pie-clearfix或overflow: auto清除家长。

然而，我遇到了这些问题：

如果我使用pie-clearfix，则.picture旁边的元素.bar也会包含在空白处：http://jsfiddle.net/6C7WD/
如果我使用overflow: auto或overflow: hidden，则.bar的宽度不再跨越文档的宽度：http://jsfiddle.net/fv2gA/

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

在布局中，.bar的高度根据内部内容而变化。我想给.bar .picture margin-bottom .bar，以便根据.picture或position: absolute的具有该.picture之后的任何内容。更高的高度。

这排除了使用.bar {{1}}作为解决方案。

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

仅清除{{1}}中的花车。
不会删除流中的任何元素。

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/

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

1 个答案: