Плаваючі елементи

Влад Мержевич

Плаваючі елементи - це елементи, які обводяться по контуру іншими об'єктами на веб-сторінці, наприклад, текстом. Хоча ніхто ніде не плаває, правильніше говорити "обводжені елементи", але термін "плаваючий елемент" вже давно закріпився, тому його будемо використовувати.

Плаваючі елементи активно використовуються при верстці і в основному використовуються для виконання наступних завдань.

  • Обводження зображень текстом.
  • Створення врізок.
  • Розташування шарів по горизонталі (додавання колонок).

Все це виконує одне стилеве властивість float, а допомагають йому в цьому інші властивості. Хоча спочатку float не планувався на таку універсальну роль, але життєві реалії розставили всі крапки над "і".

Обводження зображень текстом

Є різні способи об'єднання тексту та зображень. Зазвичай зображення вирівнюється по лівому або правому краю, а текст обводить його по контуру.

Для такого форматування використовується атрибут align тега <img> зі значенням left або right. Щоб створити відстань між символами та краєм зображення, до тегу <img> також додається атрибут hspace для горизонтального відступу і vspace для вертикального.

Приклад 1. Використання атрибута align

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Плаваючі елементи</title>
 </head>
 <body>
  <p><img src="images/figure.jpg" width="100" height="111" 
  align="left" hspace="5" vspace="5" alt="Картинка"></p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 </body>
</html>

У цьому прикладі зображення вирівнюється по лівому краю вікна браузера за допомогою значення left властивості float, а текст обводить зображення з правого та нижнього краю. Колір фону та поля навколо зображення призначені для краси і не є обов'язковими.

Створення врізок

Врізкою називається блок з зображеннями та текстом, який вбудовується в основний текст. Врізка зазвичай розташовується по лівому або правому краю текстового блоку, а основний текст обводить її з інших сторін.

Для того, щоб врізка виділялася в тексті, їй зазвичай встановлюють фоновий колір та додають рамку. Зовнішнім виглядом врізки нагадує спосіб обводження текстом зображення, тому код для створення врізок практично ідентичний попередньому.

Приклад 3. Додавання врізки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Плаваючі елементи</title>
  <style type="text/css">
   .incut {
    float: left; /* Обводження врізки по правому краю */
    width: 100px; /* Ширина врізки */
    background: #fc0; /* Колір фону */
    padding: 5px; /* Поля навколо зображення */
    margin: 5px 10px 5px 0; /* Відступи навколо зображення */
    border: 1px solid #333; /* Параметри рамки */
   }
  </style>
 </head>
 <body>
  <p class="incut">Ut wisi enim ad minim veniam, quis nostrud 
  exerci taion ullamcorper suscipit lobortis nisl.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 </body>
</html>

Результат прикладу показаний на рис. 3.

При створенні врізок обов'язково вказуйте її ширину за допомогою width. В іншому випадку розмір шару буде набагато ширшим, ніж потрібно.

Розташування шарів по горизонталі

За замовчуванням шари вирівнюються по вертикалі один під одним, але за допомогою властивості float їх можна змусити розташовуватися поруч по горизонталі. При цьому потрібно встановити ширину шарів і вказати для них float, як показано в прикладі 4.

Оскільки для другого шару також застосовується обводження, то доданий нижче текст розміщується справа від шару. Уникнути цього допоможе властивість clear, яка скасовує дію float.

Приклад 4. Створення двох колонок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Плаваючі елементи</title>
  <style type="text/css">
   .layer1 {
    width: 150px; /* Ширина першого шару */
    background: #f0f0f0; /* Колір фону */
    float: left; /* Обводження по правому краю */
   }
   .layer2 {
    width: 250px; /* Ширина другого шару */
    background: #fc0; /* Колір фону */
    float: left; /* Обводження по правому краю */
   }
   .layer1, .layer2 {
    padding: 7px; /* Поля навколо тексту */
    margin-bottom: 1em; /* Відступ знизу */
   }
   .layer3 {
    clear: both; /* Скасовуємо обводження */
   }
  </style>
 </head>
 <body>
  <div class="layer1">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
  <div class="layer2">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
  <div class="layer3">
   Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit 
   lobortis nisl ut aliquip ex en commodo consequat.
  </div>
 </body>
</html>

Результат прикладу показаний на рис. 4.

Створення колонок за допомогою float має декілька особливостей. Перша, як вже згадувалося, полягає в тому, що після плаваючих елементів потрібно додавати елемент з властивістю clear, який вимикає обводження. Це необхідно у випадку, якщо передбачається використання нижче розташованих шарів. Друга особливість пов'язана з представленням плаваючих шарів. Якщо вікно браузера зменшити до певної межі, то шари переміщуються по вертикалі.

Існують способи, як уникнути подібної поведінки шарів, але про них ми поговоримо пізніше. Тема створення багатоколоночного макета за допомогою плаваючих елементів досить обширна і виходить за межі цієї статті.

Резюме

Плаваючі елементи використовуються на веб-сторінці зазвичай для обтікання текстом навколо об'єкта. У якості таких об'єктів можуть використовуватися зображення або шари, які містять зображення та написи. Для створення обтікання призначено стилеве властивість float зі значенням left або right. Значення left вирівнює шар, до якого додано float, по лівому краю, а обтікання відбувається по вільним сторонам. Значення right вирівнює шар по правому краю.

Окрім такої очевидної орієнтації плаваючих елементів, за допомогою них можна розташовувати шари по горизонталі і таким чином формувати колонки. Хоча властивість float початково не призначалася для такої ролі, створення багатоколоночного макету веб-сторінки на основі float досить усталено. Такий спосіб має деякі недоліки, але їх можна враховувати і використовувати в своїх цілях.

веб-верстка

Часті запитання