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

Question

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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