Здравствуйте, уважаемые читатели!
Нередко при создании шаблонов с помощью плавающих блоков приходится решать проблему с нерасширяющимся контейнером по размеру плавающих элементов, находящихся в нем. Чтобы исправить это, существует множество методов, но самым быстрым и легким является использование свойства overflow .
Открыв файл «demo_1.html», вы увидите пример проблемы с главным контейнером. Чтобы избавиться от нее, к главному контейнеру добавимoverflow: auto; или overflow: hiddden;
container {
overflow: auto;
}
Свойство overflow: hiddden; может пригодиться для избавления от обтекания содержания вокруг плавающего элемента.
.image {
float: left;
}
.text {
overflow: hidden;
}
Нюансы
Кроме преимуществ данного метода, у него есть и недостатки:
из-за применения overflow: auto; в случае, если текст или содержание не умещается в контейнере, появляется полоска прокрутки. Это происходит, когда у вас есть большое изображение или длинный текст.
Страница в файле «demo_2.html» наглядно показывает подобную ситуацию.
Чтобы избавится от проблемы с длинным текстом, контейнеру добавляем свойство word-wrap: break-word;
.container {
word-wrap: break-word;
А в случае с большим изображением используем свойство max-width: 100%; — оно изменяет его размеры в соответствии с размерами контейнера.
.container img {
max-width: 100%;
height: auto;
}