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

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

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

Должно быть просто взломать.

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

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

М.