Применение плавающей модели


Вы хотите разместить на странице слева или справа изображения так, чтобы текст обтекал их, а не располагался над или под изображением.
Сначала создайте для изображений селекторы класса:
.leftFloat { float: left
}
.rightFloat { float: right
}
Затем добавьте селектор класса в разметку страницы:
cimg src="csscookbook.gif” class="leftFloat” alt="cover" />
<p>This is the book cover for the <em>CSS Cookbook</em>.</p>
<img src="csscookbook.gif” class=”rightFloat" alt=”cover" />
<p>This is the book cover for the <em>CSS Cookbook</em>.</p>

До того как соблюдение стандартов стало настоятельной рекомендацией, дизайнеры пользовались атрибутом align элемента img для расположения изображения сбоку и обеспечения обтекания его текстом. Консорциум W3C выступил против применения атрибута align и теперь рекомендует использовать вместо него свойство float.
Для сдвига объекта влево или вправо от его исходного положения свойство float может применяться не только к изображениям.
Второе изображение может наложиться на абзац, связанный с первым изображением. Это сбивает с толку и требует корректировки. Для исправления данного недостатка используйте свойство clear: р {
clear: left;
}
Свойство clear заставляет абзац выводиться после вывода потока с изображением. Во втором элементе img свойство clear вместо выравнивания со вторым элементом р сдвигает изображение на одну строку ниже предыдущего.



Правельные рецепты CSS