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

Общей проблемой, которая у меня есть с веб-страницами, являются плавающие divs, ползущие за пределами их контейнеров.

#wrapper{
    border:1px solid red;
}

#wrapper div{
    float:left;
    font-size: 3em;
}
...
<div id="wrapper">
    <div>Hello World</div>
</div>

Пример в реальном времени: http://jsfiddle.net/ugUVa/1/

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

Многое более ясное решение, которое я видел, устанавливает стиль переполнения divs divs скрытым:

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

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

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

Может ли кто-нибудь предложить объяснение этому поведению?

Спасибо

Ответы

Ответ 1

Создает контекст форматирования блока .

Контексты блочного форматирования важны для позиционирования (см. float) и очистки (см. очистку) от поплавков. Правила размещения и очистка поплавков применяются только к вещам внутри одного и того же блока форматирование контекста. Поплавки не влияют на расположение вещей в других контекстов форматирования блоков, а clear очищает только пропуски в тот же контекст форматирования блока.

см. также: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Ответ 2

Правильно, что стиль overflow предназначен для управления тем, что происходит с переполнением содержимого.

Влияние на плавающие элементы является побочным эффектом стиля overflow, создающего контекст форматирования блока для элемента.

Когда вы не укажете размер для содержащего элемента, контекст форматирования блока получает свой размер из содержащихся в нем элементов, так что это размер, который получает содержащийся элемент.