Достаточно часто на различных сайтах встречается изображение, которое обтекается текстом, следующего за ним параграфа. Такая задача решается очень просто. Нужно добавить свойство float:left к изображению и текст следующего параграфа будет его обтекать.
Но что если нужно, чтобы текст параграфа выглядел как блок, следующий за изображением, без обтекания текста? Здесь требуется использование различных ухищрений.
Однако такая задача имеет очень простое решение, которое может быть весьма полезным в некоторых случаях.
Описание проблемы
Когда приходится иметь дело с плавающими элементами, то для того, чтобы предотвратить обтекание текста под элементом, приходится использовать трюки. Задача возникает в случае если высота плавающего элемента меньше высоты текста. Текст начинает "заползать" под элемент.
Но есть простое решение.
Решение
Нужно просто использовать для параграфа следующий код CSS:
p.no-wrapp-text
{
overflow: hidden;
}
Плюсы
Очень простой метод.
Не требуется дополнительная разметка.
Нет зависимости от плавающих элементов - параграфы можно использовать отдельно.
Минус
Данный метод не работает в IE6. Поэтому надо быть весьма осторожным, так как в данном браузере весь шаблон страницы может "поплыть".