Edit in JSFiddle

.wrap { width:320px; background-color:#eee; }
.left { float:left; padding:50px; background-color:red; }
.right { float:right; padding:50px; background-color:blue; }

/* 방법1. */ .clear { clear:both; }
/* 방법2. */ .wrap { overflow:auto; }
/* 방법3. */ .wrap:after { content:""; display:block; clear:both; }
/* 방법4. */ .wrap { min-height:contain-floats; } 
/*
앞으로 추가될 것으로 기대되는 속성 'contain-floats'
http://dev.w3.org/csswg/css-sizing/#the-contain-floats-value
*/

<div class="wrap">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="clear">clear</div>
</div>