Обтекание блока текста

⚠️ Bymas - Форум разработчиков

Под обтеканием блока текстом понимают тот же самый эффект, который можно реализовать для графики, когда картинка не разрывает блок текста, а встраивается в него. Текст в этом случае "обтекает" картинку с одной из сторон - там где есть свободное поле между границей страницы (элемента) и картинкой. "Обтекание" картинки текстом от обычного встраивания картинки в текст документа отличается тем, что вдоль вертикальной границы картинки располагается несколько строк текста, а не одна.

"Обтеканием" блока текста другим текстом управляют два атрибута CSS: float и clear.

Атрибут float определяет плавающий блок текста. Он может принимать значения:

left - блок прижат к левой границе охватывающего блок элемента,
rigth - блок прижат к правой границе охватывающего блок элемента,
both - текст может обтекать блок с обеих сторон.
Проиллюстрировать обтекание можно на следующем примере:

Этот блок текста мы прижали
к левой границе раздела.
Он имеет границу шириной в
один пиксель и ширину в 30%
от ширины раздела. Размер шрифта обтекаемого блока текста намеренно уменьшен до 8-ми пикселей, чтобы блок текста лучше выделялся на общем фоне содержания страницы.

При использовании значения "right" блок текста будет прижат вправо.

Этот блок текста мы прижали
к правой границе раздела.
Он имеет границу шириной в
один пиксель и ширину в 30%
от ширины раздела. Размер шрифта обтекаемого блока текста намеренно уменьшен до 8-ми пикселей, чтобы блок текста лучше выделялся на общем фоне содержания страницы.

Второй атрибут описания стилей clear позволяет управлять собственно обтеканием. Он запрещает наличие плавающих блоков около блока текста. Атрибут может принимать значения: right, left, none, both:

<p style='clear:right;text-align:justify;'>У этого блока текста не может быть "плавающего" правого блока, т.к. мы его запретили. По этой причине он начинается ниже прижатого вправо ограниченного блока.</p>

Интерпретации clear в NN и IE различаются.

<<< - Предыдущая | Cледующая ->>>