Поговорим о всем известном свойстве float, не менее известном position и их соседе — display.
Как известно, в css есть понятие «схема позиционирования». Этих схем позиционирования есть три вида — нормальный поток, поплавки и абсолютное позиционирование.
Теперь необходимо ввести некоторые термины, прежде чем написать то, что я хочу донести.
Документ — это наша страница.
Дерево документа — это структура, которую мы описали с помощью html в документе.
Для каждого элемента в дереве документа генерируется так называемый box. Назовём его контейнером, по-моему это достаточно точно отражает его смысл.
Также необходимо учитывать, что каждый элемент генерирует несколько контейнеров-потомков, для которых контейнер является содержащим (если он сгенерирован блочным элементом).
Контейнеры-потомки располагаются относительно содержащего контейнера, но им не ограничиваются, что может вызвать переполнение.
Конечно, всё немного сложнее, хотя нам можно не углубляться в дебри спецификации. Замечу лишь, что есть разные типы контейнеров, но оставим типы контейнеров на потом.
Контейнер располагается в соответствии со одной из схем позиционирования:
Выбор схемы позиционирования осуществляется с помощью свойств float и position.
За что отвечает свойство display? Оно отвечает за тип контейнера (а иногда ещё и контейнера-потомка), который будет сгенерирован элементом.
Эти три свойства (postition, float, 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. Также хочу выразить благодарность товарищу с форума Вебмаскона, который сподвиг меня на написание этой статьи.
Как известно, в css есть понятие «схема позиционирования». Этих схем позиционирования есть три вида — нормальный поток, поплавки и абсолютное позиционирование.
Теперь необходимо ввести некоторые термины, прежде чем написать то, что я хочу донести.
Документ — это наша страница.
Дерево документа — это структура, которую мы описали с помощью html в документе.
Для каждого элемента в дереве документа генерируется так называемый box. Назовём его контейнером, по-моему это достаточно точно отражает его смысл.
Также необходимо учитывать, что каждый элемент генерирует несколько контейнеров-потомков, для которых контейнер является содержащим (если он сгенерирован блочным элементом).
Контейнеры-потомки располагаются относительно содержащего контейнера, но им не ограничиваются, что может вызвать переполнение.
Конечно, всё немного сложнее, хотя нам можно не углубляться в дебри спецификации. Замечу лишь, что есть разные типы контейнеров, но оставим типы контейнеров на потом.
Контейнер располагается в соответствии со одной из схем позиционирования:
- Нормальный поток (normal flow, далее поток), включающий в себя форматирование блока, инлайн-форматирование и относительное позиционирование.
- Поплавки (float). В этом случае, контейнер изначально позиционируется в соответствии с потоком, а затем сдвигается вправо или влево насколько возможно.
- Абсолютное позиционирование (absolute positioning). При таком подходе контейнер полностью изымается из потока (т.е. не оказывает никакого влияния на соседние контейнеры) и располагается относительно содержащего контейнера.
Выбор схемы позиционирования осуществляется с помощью свойств float и position.
За что отвечает свойство display? Оно отвечает за тип контейнера (а иногда ещё и контейнера-потомка), который будет сгенерирован элементом.
Эти три свойства (postition, float, display) взаимодействуют следующим образом:
- Если display равно none, то float и position должны быть проигнорированы. При этом элемент не сгенерирует контейнера.
- Если position равно absolute или fixed (подвид absolute), то display устанавливается в block, а float — в none (таким образом, указанный position отменяет float). Расположение блока в этом случае описывается свойствами top, right, bottom, left и содержащим контейнером.
- Если float не равен none, то display устанавливается в block и контейнер всплывает.
- Иначе применяется свойство 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. Также хочу выразить благодарность товарищу с форума Вебмаскона, который сподвиг меня на написание этой статьи.