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

В этом question у кого-то была проблема с макетом, потому что у них было два плавающих div внутри неплавающего div. Я предложил добавить float: left к своему внешнему div, что устраняет проблему. Кто-то предложил добавить overflow: hidden, что, к моему удивлению, также сработало.

Это не похоже на цель overflow: hidden. Ясно, что переполнение: скрытые заставляют элементы каким-то образом просматривать своих детей. То, что я действительно пытаюсь понять, в чем разница. Интуитивно это должно сделать элемент меньше, чем в противном случае, никогда больше, и я не понимаю, почему это повлияет на иерархию макета.

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

Изменить: я обнаружил, что установка overflow: auto тоже работает, поэтому значение переполнения, похоже, не так важно, как только оно установлено. Я до сих пор не понимаю, почему.

Ответ 1

Переполнение чего-либо, кроме visible, создает новый контекст форматирования блока, который заставляет содержать float. Это стандартное поведение.

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

В контексте форматирования блока поля выкладываются один за другим, вертикально, начиная с вершины содержащий блок. Вертикальный расстояние между двумя короткими определяемый свойствами "margin". Вертикальные поля между смежными блочные блоки в форматировании блока контекстный коллапс.

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

Ответ 2

Плавающие элементы во многих случаях удаляют их из обычной компоновки. Это не совсем так или не похоже на position: absolute;. Элементы блока обычно игнорируют всплывающие элементы (включая элементы блока, которые содержат элемент), но в отличие от элементов position: absolute; плавающие элементы распознаются и обертываются встроенными элементами, такими как текст.

Наличие элемента wrapping (div или other) также будет плавающим, заставляет его вести себя по-разному в отношении связанных с ним элементов. Если элемент упаковки, установленный в overflow: hidden;, заставляет его рассматривать элементы, которые он содержит по-разному. Я думаю, это просто счастливое совпадение, что конечный результат здесь, похоже, тот же. Не причуда или ошибка... как это работает.