Использование float
Свойство float превращает элемент в плавающий, при этом он прижимается к левому или правому краю родителя, а текст его обходит с других сторон. Такое поведение текста напоминает поток воды, обтекающий камень, поэтому элементы с таким поведением и называются плавающими. В отличие от абсолютно позиционированных плавающие элементы не обладают властью над координатами, их не получится заставить встать в точно заданную точку, но они имеют ряд примечательных характеристик. Настолько, что свойство float для вёрстки стало использоваться повсеместно. Перечислим лишь ряд возможных приложений:
галереи небольших фотографий;
двух и трёхколоночные макеты;
горизонтальные меню;
иллюстрации в тексте;
многоколоночный текст.
float может добавляться к изображениям (тег <img>), блочным элементам вроде <p>, <div> и к строчным элементам (<span>, <a>, <strong>). В примере 3.12 показано использование float для абзаца с фотографией. Свойство float лишь частично влияет на элемент в потоке. Можно управлять положением по горизонтали, меняя значение float с right на left, но по вертикали положение элемента задаётся его местом в коде.
Пример 3.12. Плавающий элемент
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Обтекание</title>
<style type="text/css">
.right {
float: right;
}
</style>
</head>
<body>
<p class="right"><img src="images/cat.jpg" alt="Кошка" /></p>
<p>Сфотографировано на камеру Canon EOS 50D. Объектив 24-105,
диафрагма 4.0, выдержка 1/500, чувствительность ISO 400</p>
</body>
</html>
Результат примера показан на рис. 3.22.
Рис. 3.22. Плавающий элемент