Как избавиться от обтекания содержания

Как избавиться от обтекания содержания

Волна обтекает скалу

Здравствуйте, уважаемые читатели!

Нередко при создании шаблонов с помощью плавающих блоков приходится решать проблему с нерасширяющимся контейнером по размеру плавающих элементов, находящихся в нем. Чтобы исправить это, существует множество методов, но самым быстрым и легким является использование свойства 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;
}

Дискуссия по теме