Ali Majed HA Ответов: 1

Как логично переполнить вилки?

Приветствия
Я хочу сделать навигационное меню. Используя приведенный ниже код:
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #a1a1a1;
}

все работает нормально, но если я удалю:
overflow: hidden;

фон меню исчезает. Как 
overflow: hidden;
логически работает в этом сегменте кода?

Вот адрес скрипки:
JSFiddle

Что я уже пробовал:

Я не могу понять логику, стоящую за этим 
overflow: hidden;
.

enhzflep

Приятель, в данном случае невозможно дать вам однозначный ответ на вопрос: "почему мой код дает такой результат?" когда вы не предоставляете код...

В принципе, элемент UL имеет размер и положение, вычисляемые браузером. Дочерние элементы этого элемента UL имеют комбинированные размеры, которые превышают размеры элемента UL. В результате можно сказать, что они переполняют свой родительский контейнер. Когда вы говорите родителю скрыть любое содержимое, выходящее за его границы (overflow: hidden), результат заключается в том, что материал исчезает. простоты.

Ali Majed HA

Эй, мой друг, я предоставил полный код на веб-сайте jsfiddle со ссылкой, о которой идет речь.
Спасибо за ваш комментарий и объяснение.

1 Ответов

Рейтинг:
6

Richard Deeming

Это старый метод, чтобы гарантировать, что высота родительского элемента расширяется, чтобы включить плавающие дочерние элементы. Без него, то <ul>высота коллапса падает до нуля, так что цвет фона не имеет никакого эффекта.

Методы очистки поплавков | Все о поплавках | CSS-трюки[^]
CSS: очистка поплавков с переполнением - Web Designer Wall - тенденции дизайна и учебные пособия[^]

Для современных браузеров вы можете использовать Flexbox в качестве альтернативы. Снимите крышку li { float: left; } правило и замена overflow:hidden; с display:flex; на ul правило:
Обновленная Скрипка[^]
Полное руководство по Flexbox | CSS-Tricks[^]
Могу ли я использовать... На основе адаптируемых блоков[^]