Флоатінг - одне з ключових понять CSS. Без розуміння цього принципу створення веб-сторінок на основі CSS неможливе. Floaten (флоатінг) можна дуже добре перекласти як розтікання, що досить точно описує сутність. В кінцевому результаті флоатінг - це не що інше, як розташування елемента ліворуч або праворуч від іншого елемента. (Зазвичай елемент мав би бути під іншим елементом).
Наведений перший приклад повинен уточнити цей аспект.
<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="de">
<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">Зміст ...</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>Тут створюється двоколоночний макет. Особливість полягає в тому, що колонки стоять поруч.
І саме це поруч стояння досягається завдяки концепції обтікання. Детальні інформації щодо створення веб-сторінок на основі обтікання будуть надані у подальших частинах цього циклу.
