Page 56 - 6108

float: left || right || none.
При використанні властивості float для блокових елементів обов'язково
здавати ширину. Тим самим браузер створить місце для іншого вмісту. Але
якщо сукупна ширина всіх стовпців виявиться менше доступного місця, то
останній елемент спуститься вниз.
При цьому вертикальні відступи (margin) обтічних елементів не

зливаються з відступами сусідніх елементів, на відміну від звичайних блочних
елементів.
Щоб запобігти зсув наступного елемента, для скасування правил
обтікання застосовують властивість
clear: left || right || both || inherit.

– left – скасовує обтікання по лівій стороні, зміщуючи елемент вниз.
Праве обтікання залишається в силі.
– right – скасовує обтікання по правій стороні, зміщуючи елемент
вниз. Ліве обтікання залишається в силі.
– both – скасовує обтікання з обох сторін елемента, зміщуючи його
вниз.
– none – скасовує очистку обтікання, встановлене для елементів однієї
групи.

– inherit – успадковує значення від батьківського елемента.
Значення float: none; скасовує будь-яке переміщення, застосовується
лише щодо елемента, для якого вже встановлено обтікання.
Правило {overflow: hidden;} запобігає відображення фону або меж
під плаваючими елементами.
Проблеми позиціонування
У елемента з position: absolute ширина дорівнює ширині вмісту,
тобто такий блок не займає всю ширину батьківського блоку.
Якщо всередині блоку з position: absolute розташовано елементи,
для яких задано обтікання float, то висота цього елемента буде дорівнює
висоті найвищого з цих елементів.
На елемент з position: absolute і додатніми значеннями left,

right, top або bottom не чинять вплив додатні значення властивості margin.
Для одного елемента не можна одночасно встановлювати властивості
position: absolute і float до встановлених значень, але можна задавати
position: relative і float.
Властивість z-index
Властивість z-index керує порядком накладання позиційованих
елементів у випадку, коли вони накладаються один на одного. Властивість
приймає цілі додатні і від’ємні значення.
У нормальному потоці position: static елементи розташовуються
послідовно один за іншим в тому порядку, в якому вони визначені в html-
документі. За замовчуванням встановлено z-index: auto;.
Властивість z-index задає порядок розташування елементів уздовж осі
Z. У звичайній ситуації елементи з високим значенням індексу