清除修復問題的溢出和餅clearfix

我想漂浮一些元素和應用clearfix使父元素可以擴展到孩子的高度和寬度。清除修復問題的溢出和餅clearfix

所以，我只需設置佈局按本琴：http://jsfiddle.net/fMjEx/

我當時就想裏面漂浮的.bar元素。這通常是非常直接的：

浮動元素。
清除修復使用pie-clearfix或overflow: auto父。

不過，我遇到了這些問題：

如果我用餅clearfix，這是旁邊.bar元素.picture也包含在清算：http://jsfiddle.net/6C7WD/
如果我使用overflow: auto或overflow: hidden，.bar的寬度不再跨越文檔的寬度：http://jsfiddle.net/fv2gA/

最初，我的一個解決方案是製作.pictureposition: absolute。但是，這種方法的問題是元素被從流中取出。

在佈局，.bar高度取決於內的內容是可變的。我想給.bar和.picture一個margin-bottom讓他們什麼是根據.bar或.picture是否具有更大的高度量向下推之後到來。

這排除了對.picture的解決方案使用position: absolute。

是否有解決方案滿足以下要求？

只清除.bar內的浮標。
不從流中移除任何元素。

來源

2012-10-21 F21

這是我結束瞭解決方案：

增加了包裝的標記：

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

來源

2012-10-21 02:19:24 F21

清除修復問題的溢出和餅clearfix

回答

相關問題