Переполнение скрыто в горизонтальном меню

Question

Почему при создании горизонтального меню в CSS используется переполнение: скрыто, чтобы сделать это меню видимым?

      type here

Я хотел бы знать, почему мы должны использовать переполнение: скрыто так же, как в примере ниже:

www.w3schools.com/css/tryit.asp?filename=trycss_float5

Answer 1

Элементы внутри имеют стиль

      float: left;

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

Если вы удалите стиль, вы увидите, что другой<li>элементы исчезают, пока вы не наведете на них курсор. Используяoverflow:hidden, вы убедитесь, что родительский контейнер расширяется и включает в себя плавающие дочерние элементы. Удаление стиля означает, что родительский контейнер (<ul>) больше не содержит плавающих детей, благодаря чему они становятся невидимыми. Наведение на них просто вызывает:hoverстили.