Плавание - один из ключевых концепций CSS. Без понимания этого принципа невозможно создание веб-страниц на основе CSS. К слову, плавание можно прекрасно перевести как "плыть", что в точности передает суть. В конечном итоге плавание означает, что элемент располагается слева или справа от другого элемента. (Обычно данный элемент находился бы ниже другого элемента).
Первый пример должен прояснить этот аспект.
<p><img src="bild.jpg" /> В этом наборе есть 12 своих форм, которые вы можете использовать в своих буклетах, фонах и т.д. Формы делятся на 18, 21 и 24 полосы, а также различную ширину лучей. Эти предустановки являются отличным основанием для красивых эффектов в ваших макетах и изображениях.</p>
Здесь был определен абзац. Внутри этого абзаца находится изображение и обычный текст.
Взгляд на результат показывает, что изображение находится внутри текста.
Теперь вступает в игру свойство float.
img { float: left;}
Снова посмотрим на результат.
Здесь изображение было "зафлоатено". Текст теперь обтекает изображение.
Свойству float можно присвоить значения left и right, чтобы "плавающий" элемент оставался слева (float: left) или справа (float: right).
Можно сразу применить float: right к изображению.
В данном случае происходит три вещи:
• Графика удаляется из обычного потока.
• Она перемещается в элемент p в самый верх.
• Она отображается как можно дальше справа.
Взгляд на предыдущие результаты показывает, что это еще не слишком красиво выглядит. Фактически, не хватает отступов между изображением и обтекающим текстом. Измените синтаксис следующим образом:
img {
float: left;
margin-right: 20px;
}
Изображению был назначен правый отступ шириной 20 пикселей. Это дает следующий вид:
Просто поиграйте немного с отступами.
Завершение плавания
Вернемся к примеру с изображением. Я добавлю к синтаксису дополнительный абзац текста.
<p><img src="bild.jpg" />В этом наборе есть 12 своих форм, которые вы можете использовать в своих буклетах, фонах и т.д. Формы делятся на 18, 21 и 24 полосы, а также различную ширину лучей. Эти предустановки являются отличным основанием для красивых эффектов в ваших макетах и изображениях.</p> <p>В этом наборе есть 12 своих форм, которые вы можете использовать в своих буклетах, фонах и т.д. Формы делятся на 18, 21 и 24 полосы, а также различную ширину лучей. Эти предустановки являются отличным основанием для красивых эффектов в ваших макетах и изображениях.</p>
Результат выглядит так:
Фактически обтекает не только первый абзац изображение. То же самое относится и ко второму текстовому абзацу. Это происходит потому, что изображение заходит за границы первого абзаца вниз. Для лучшего понимания дам второму абзацу, в котором находится изображение, фоновый цвет.
Если вы посмотрите на результат, станет ясно, что изображение действительно заходит за границы абзаца вниз. Это в такой форме, разумеется, не всегда желаемо. В этот момент вступает важная clear-свойство. Потому что через него можно завершить плавание. clear заставляет последующий элемент начинаться фактически под зафлоатившим элементом, а не рядом с ним. clear может иметь следующие значения:
• left - завершает float: left
• right - завершает float: right
• both - завершает как float: right, так и float: left
В следующем примере я применяю к второму абзацу clear: left, чтобы завершить плавание.
<!DOCTYPE html>
<html lang="ru">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
img {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<p style="background-color:#CCFF66;"><img src="bild.jpg" />В этом наборе есть 12 своих форм, которые вы можете использовать в своих буклетах, фонах и т.д. Формы делятся на 18, 21 и 24 полосы, а также различную ширину лучей. Эти предустановки являются отличным основанием для красивых эффектов в ваших макетах и изображениях.</p>
<p style="clear:left;">В этом наборе есть 12 своих форм, которые вы можете использовать в своих буклетах, фонах и т.д. Формы делятся на 18, 21 и 24 полосы, а также различную ширину лучей. Эти предустановки являются отличным основанием для красивых эффектов в ваших макетах и изображениях.</p>
</body>
</html>
С помощью показанного синтаксиса второй абзац теперь действительно отображается под изображением.
В большинстве случаев, вместо использования clear: left или clear: right, можно сразу использовать clear: both. Поэтому рекомендуется просто создать соответствующий класс в своем файле стилей, который затем можно вызывать по необходимости.
.clearing {
clear: both;
}
Этот класс можно использовать всякий раз, когда нужно завершить плавающий элемент.
<p class="clearing">Inhalte ...</p>
Для чего нужно плавающее позиционирование
Естественно, плавающее позиционирование необходимо не только для текствого потока вместе с изображениями. Фактически, оно является основным концептом CSS-основанных веб-страниц. Благодаря плавающему позиционированию можно легко реализовать многостолбчатые макеты. Вот пример:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
#navi {
float:left;
width:12em;
background-color:#99FFFF;
}
#inhalt {
margin-left: 14em;
background-color: #FF3333;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li>Startseite</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
<div id="inhalt">
Здесь находится содержимое веб-страницы.
</div>
</body>
</html>Здесь создается двухстолбчатый макет. Интересно, что столбцы находятся рядом.
Именно это рядом стояние обеспечивается концепцией плавающего позиционирования. Подробная информация о создании веб-страниц на основе плавающего позиционирования будет представлена в дальнейшем ходе этой серии.
