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

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

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

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

Edit: I ' Мы обнаружили, что настройка overflow: auto тоже работает, так что, похоже, важно не значение переполнения, а просто то, что оно установлено. Я все еще не понимаю, почему.