Pull to refresh

Разделяй и властвуй — float, position и display

Reading time 2 min
Views 35K
Поговорим о всем известном свойстве float, не менее известном position и их соседе — display.

Как известно, в css есть понятие «схема позиционирования». Этих схем позиционирования есть три вида — нормальный поток, поплавки и абсолютное позиционирование.

Теперь необходимо ввести некоторые термины, прежде чем написать то, что я хочу донести.


Документ — это наша страница.
Дерево документа — это структура, которую мы описали с помощью html в документе.

Для каждого элемента в дереве документа генерируется так называемый box. Назовём его контейнером, по-моему это достаточно точно отражает его смысл.

Также необходимо учитывать, что каждый элемент генерирует несколько контейнеров-потомков, для которых контейнер является содержащим (если он сгенерирован блочным элементом).

Контейнеры-потомки располагаются относительно содержащего контейнера, но им не ограничиваются, что может вызвать переполнение.

Конечно, всё немного сложнее, хотя нам можно не углубляться в дебри спецификации. Замечу лишь, что есть разные типы контейнеров, но оставим типы контейнеров на потом.

Контейнер располагается в соответствии со одной из схем позиционирования:
  1. Нормальный поток (normal flow, далее поток), включающий в себя форматирование блока, инлайн-форматирование и относительное позиционирование.
  2. Поплавки (float). В этом случае, контейнер изначально позиционируется в соответствии с потоком, а затем сдвигается вправо или влево насколько возможно.
  3. Абсолютное позиционирование (absolute positioning). При таком подходе контейнер полностью изымается из потока (т.е. не оказывает никакого влияния на соседние контейнеры) и располагается относительно содержащего контейнера.

Выбор схемы позиционирования осуществляется с помощью свойств float и position.

За что отвечает свойство display? Оно отвечает за тип контейнера (а иногда ещё и контейнера-потомка), который будет сгенерирован элементом.

Эти три свойства (postition, float, display) взаимодействуют следующим образом:
  1. Если display равно none, то float и position должны быть проигнорированы. При этом элемент не сгенерирует контейнера.
  2. Если position равно absolute или fixed (подвид absolute), то display устанавливается в block, а float — в none (таким образом, указанный position отменяет float). Расположение блока в этом случае описывается свойствами top, right, bottom, left и содержащим контейнером.
  3. Если float не равен none, то display устанавливается в block и контейнер всплывает.
  4. Иначе применяется свойство display, в том виде, в котором оно было определено.

Теперь самое главное, то, что следует из взаимодействия свойств и должен бы знать каждый, но многие забывают:

В случае абсолютного расположения контейнера (position равно absolute или fixed), свойство display устанавливается в block, а float в none, независимо от того, что кто-либо написал в css.

В случае расположения контейнера, как поплавка (float не равно none), свойство display устанавливается в block, независимо от того, что кто-либо написал в css.

Ссылки:
www.w3.org/TR/REC-CSS2/visuren.html
www.w3.org/TR/REC-CSS2/visudet.html

ps. Также хочу выразить благодарность товарищу с форума Вебмаскона, который сподвиг меня на написание этой статьи.
Tags:
Hubs:
+10
Comments 18
Comments Comments 18

Articles