Почему скрытое переполнение не позволяет плавающим элементам покидать свой контейнер?

Распространенная проблема, с которой я сталкиваюсь с веб-страницами, - это плавающие блоки div, выползающие за пределы своих контейнеров.

#wrapper{
    border:1px solid red;
}

#wrapper div{
    float:left;
    font-size: 3em;
}
...

    
Hello World

Живой пример: http://jsfiddle.net/ugUVa/1/

Есть много грязных способов исправить это (вставка div с помощью clear: both)

Более удобное решение Я видел установку скрытого стиля переполнения divs оболочки:

Пример: http://jsfiddle.net/ugUVa/2/

Это хорошо работает во всех браузерах, красиво и чисто, без дополнительной разметки. Я счастлив, но понятия не имею, ПОЧЕМУ это работает!

Вся документация, которую я просмотрел, указывает на переполнение: hidden предназначен для сокрытия содержимого, а не изменения размера родительского элемента для соответствия его дочерним элементам ...

Кто-нибудь может предложить объяснение такого поведения?

Спасибо