Почему дочерние вертикальные поля не расширяют родительский контейнер?

Я столкнулся с ситуацией, когда мне нужна дочерняя маржа для расширения родительского контейнера. Я обнаружил, что пространство вне родителя выделено, но сам родитель не расширяется. Затем я обнаружил, что добавив `overflow: hidden 'родителям, я мог бы исправить эту проблему.

Может ли кто-нибудь пролить свет на то, почему это так?

UPDATE:

Я обнаружил, что добавление какого-либо дополнения или граничного значения для родителя также исправляет это.

Обновленный пример

Ответы

Ответ 1

Ответ на "почему" описан хорошо и лаконично здесь. Существуют определенные свойства, которые устанавливают " блок форматирования. А именно:

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

Именно это изменение контекста форматирования блока является причиной того, почему такие решения, как указано выше в комментариях, работают как margin (а в случае предыдущих float, padding следующих элементов притока) работает.