溢出元素不切割絕對定位元素

Question

在container元素中，我有浮動元素和絕對定位的圖像，需要從container突出。不過，我需要container來保持它的高度，因爲它有一個margin-bottom，它將它與下面的下一個塊分開。

問題：container的overflow: hidden將圖像切斷，因此它無法從中突出。所以我必須選擇兩件我絕對需要的東西：要突出的圖像和保持其高度的圖像container。

如何解決這個困境？

HTML

<div class='container'> 
    <div class='col1'> 
     content 
    </div> 
    <div class='col2'> 
     <img src='whatever.jpg'/> 
    </div> 
</div> 

CSS

.container { 
    overflow: hidden; 
} 
.col1, 
.col2 { 
    float: left; 
    width: 50%; 
} 
.col2 { 
    position: relative; 
} 
img { 
    position: absolute; 
    top: -100px; 
    left: -100px; 
} 

Answer 1

是遏制彩車溢出？如果有的話，還有其他幾種方法。

這些都可以找到here

現代化的方法是：

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

.container { 
 
    width: 80%; 
 
    border: 1px solid grey; 
 
    margin: 100px auto; 
 
    background: pink; 
 
} 
 
.container:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 
.col1, 
 
.col2 { 
 
    float: left; 
 
    width: 50%; 
 
    height: 150px; 
 
} 
 
.col2 { 
 
    position: relative; 
 
    background: #c0ffee; 
 
} 
 
img { 
 
    position: absolute; 
 
    top: -100px; 
 
    left: -100px; 
 
}

<div class='container'> 
 
    <div class='col1'> 
 
    content 
 
    </div> 
 
    <div class='col2'> 
 
    <img src='http://www.fillmurray.com/200/200' /> 
 
    </div> 
 
</div>