Потоки html документа

Описуються потоки Web документів при відображенні в браузерах. Потоки - це основа для розуміння грамотної верстки Web документів.

Будь HTML документ відображається в браузері користувача відповідно до певних правил. На ці правила впливають послідовність елементів в коді сторінки і властивості цих елементів. На основі ці правил браузер послідовно і методично виводить кожен елемент документа. Порядок відображення елементів на сторінці та називають потоком.
Існує кілька потоків виведення HTML елементів, в якому потоці виводити елемент браузер визначає, як уже сказано, за властивостями цих елементів. Перерахуємо можливі потоки документа:

• нормальний потік (normal flow);
• плавати (float);
• абсолютне позиціонування (absolute positioning)

Трохи пізніше ви зрозумієте, чому схеми розміщення так званих, а поки приступимо до роз'яснень.

Нормальний потік HTML документа

Основний потік документа називається нормальним потоком. З нього і почнемо.
За замовчуванням елементи виводяться в основному потоці, лише при завданні спеціальних властивостей елемент буде виведений з основного потоку документа, тобто він буде розміщуватися на сторінці і взаємодіяти зі своїми сусідами за іншими правилами. У нормальному потоці блокові елементи документа виводяться один під одним, кожен на новому рядку повністю її займаючи. Порядок виведення, наприклад, на екран визначається порядком, в якому вони написані в коді HTML документа. Рядкові елементи, у яких загальний контейнер виводяться послідовно один за одним в одному рядку, якщо рядок закінчується (наприклад, обмежена шириною батьківського контейнера), рядковий елемент переходить на рядок нижче продовжуючи висновок.
Елемент виводиться з нормального потоку, якщо у нього задано одне з наступних властивостей:

Float потік документа

Якщо елементу встановити властивість float: left або float: right. він буде виведений з нормального потоку HTML документа і розміщений у відповідності з наступними правилами позиціонування плаваючих елеменов.
Елемент виводиться з нормального потоку елементів і зміщується в крайнє положення вліво (якщо встановлено float: left) або вправо (якщо встановлено float: right) до краю батьківського контейнера або поки не зустріне край такого ж плаваючого елементу. Оскільки елемент виведений з нормального потоку, то для блокових елементів нормального потоку такі елементи перестають існувати. Але для малих елементів нормального потоку плаваючі не пропадають, рядкові елементи починають огинати плаваючі елементи по одній з їх сторін.

Потік з абсолютним позиціонуванням

Якщо елементу встановити властивість position: absolute. він буде виведений з нормального потоку (тобто. не впливатиме на своїх сусідів) і буде розміщуватися відповідно до правил абсолютного позиціонування, які свідчать.
Елемент зміщується щодо своїх координат в батьківському контейнера на величину, задану CSS властивостями topbottomleftright. Всі елементи нормального потоку, як блокові, так і малі, не знають про існування елементів з абсолютним позиціонуванням.

Окремим випадком абсолютного позиціонування вважається елемент із властивістю position: fixed. Такий елемент виводиться з нормального потоку, як і абсолютно позиційований, але зміщується щодо краю документа CSS властивостями topbottomleftright. Такий елемент не змінює свого положення щодо краю документа при скролінгу, тобто він фіксується в вікні браузера в своїх координатах. Це і відрізняє його від елемента з position: absolute.