Как работает переполнение CSS: hidden, чтобы заставить элемент (содержащий плавающие элементы) обтекать плавающие элементы?

Кто-нибудь знает, почему переполнение: hidden заставляет элемент с плавающими элементами обертывать элементы?

Я действительно хочу понять внутреннюю работу, а не просто использовать ее и доверять тому, что "она просто работает".

Я могу понять, как он работает, когда содержащий элемент перемещается в том же направлении, что и дочерние элементы, которые перемещаются, но переполнение: скрытое означает обрезку содержимого переполнения (при использовании с положением: абсолютное/относительное).

Любая информация оценена.

Ответ 1

Поплавки, абсолютно позиционированные элементы, встроенные блоки, таблицы-ячейки, таблицы-подписи и элементы с "переполнение", кроме "видимого", (за исключением случаев, когда это значение было распространение в окне просмотра) новые контексты форматирования блоков.

В контексте форматирования блоков каждый левый внешний край касается левого край содержащего блока (для форматирование справа налево, правые края трогать). Это справедливо даже в наличие поплавков (хотя линейные ящики могут сокращаться из-за floats), если в поле не установлено контекст форматирования нового блока (в котором случае сам ящик может стать более узкий из-за поплавков).

Контекст форматирования блоков очищает поплавки. Источник: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Ответ 2

Полное объяснение от Модель визуального форматирования, часть 9.2 "Поплавки" спецификаций CSS2:

Пограничный блок таблицы, замещенный на уровне блока элемент или элемент в нормальном потоке, который устанавливает новый формат форматирования блока (например, элемент с "переполнением", отличный от "видимого" ), не должен перекрывать никаких плавает в том же контексте форматирования блока, что и сам элемент. Если необходимо, реализации должны очистить упомянутый элемент, поместив его ниже любых предыдущих поплавков, но может поместить его рядом с такими поплавками, если имеется достаточное пространство. Они могут даже сделать пограничную коробку указанного элемента более узкой, чем определено в разделе 10.3.3. CSS2 не определяет, когда UA может поместить упомянутый элемент рядом с поплавком или по тому, насколько указанный элемент может стать уже.

Ответ 3

Ну, похоже, нет никакого "фактического" объяснения, почему это происходит (не то, что я могу понять в любом случае), например, выдержка из CSS-спецификации, представленная в одном из ответов, просто объяснила, что ящик с плавающим содержимым не должен расширяться для обертывания плавающие элементы - это нормально, и это логично, и я полностью понимаю это)

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

Нужно просто взломать.

Самый полезный ресурс, с которым я столкнулся (или тот, который дал самую детальную информацию, хотя и не так подробно, как мне было нужно) был от Quirksmode: http://www.quirksmode.org/css/clearing.html

Спасибо, если кто-то еще может пролить свет на то, является ли это случайным броузером, или имеет логическое объяснение для работы так, как это делается.

М.