オーバーフロー要素は絶対配置されていない要素を切り捨てません

Question

container要素では、浮動要素と絶対配置の画像がcontainerから突き出ている必要があります。しかし、それはその下の次のブロックからそれを分離するmargin-bottomを持っているので、その高さを維持するためにはcontainerが必要です。

問題：containerのoverflow: hiddenは、画像が画像から切り取られないようにカットします。だから私は絶対に必要な2つのものの中から選択する必要があります：突出する画像とその高さを維持する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>