Warum hat overflow: hidden den unerwarteten Nebeneffekt, dass die Höhe zunimmt und schwebende Elemente enthält?

Question

Oct 08, 2012, 03:46 PM

Warum hat overflow: hidden den unerwarteten Nebeneffekt, dass die Höhe zunimmt und schwebende Elemente enthält?

Diese Frage wird am besten durch erklärtdiese Geige, mit folgendem 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;
}

Grundsätzlich frage ich mich, warum das so istoverflow: hidden Veranlassen, dass das äußere Element an Höhe zunimmt und die beiden schwimmenden Elemente umfasst?