To pytanie najlepiej wyjaśnićto skrzypce, z następującym kodem HTML:

<div class="outer">
    <div class="inner-left"></div>
    <div class="inner-right"></div>
</div>

CSS:

.outer {
    width: 100px;
    border: solid 5px #000;
}
.inner-left {
    float: left;
    height: 200px;
    width: 50px;
    background: #f00;
}
.inner-right {
    float: right;
    height: 200px;
    width: 50px;
    background: #0f0;
}

Zasadniczo zastanawiam się dlaczegooverflow: hidden spowodować wzrost wysokości zewnętrznego elementu, obejmujący dwa elementy pływające?