Переполнение

В список в index.html мы добавили ещё пять пород. Они не помещаются в блок с фиксированной высотой 220 пикселей и вылезают за его пределы. Говорят, что содержимое переполняет блок.

Свойство overflow задаёт, что происходит с содержимым, которое не помещается в блок:

• visible — содержимое выходит за пределы блока и может перекрыть то, что расположено ниже. Это значение по умолчанию.
• hidden — всё, что не поместилось, обрезается. Осторожно: посетители тогда не смогут это увидеть.
• scroll — блок можно прокручивать. В некоторых системах полосы прокрутки видны, даже когда всё помещается.
• auto — блок можно прокручивать, только если содержимое не помещается. Обычно это лучший выбор.

Чтобы задать поведение только в одном направлении, используйте overflow-x (по горизонтали) или overflow-y (по вертикали).

Фиксированная высота подходит для блоков вроде нашего списка, которые должны занимать определённое место. Для обычного текста лучше оставить высоту auto: тогда блок растёт вместе с содержимым, и ничего не переполняется.