Взаимодействие CSS свойств ‘float’, ‘position’ и ‘display’

Описывается взаимодействие  основных CSS свойств ‘float’, ‘position’ и ‘display’.

На размещение элементов на Web странице большое влияние оказывают их CSS свойства ‘float’, ‘position’ и ‘display’. При этом каждому элементу соответствует (или отсутствует) бокс в соответствии с правилами Модель CSS бокса. Эти боксы формируются под воздействием ряда факторов, например:

  • размера и типа бокса(блочный бокс или строчный);
  • схемы позиционирования(нормальный поток, плавающий, абсолютный);
  • взаимодействие элементов;
  • внешних факторов(размеров экрана просмотра и прочее)

Поэтому очень важно знать правила их взаимодействия, ведь это определяет внешний вид страницы.  А взаимодействуют эти свойства следующим образом.

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

Примечание. Если значения этих свойств изменяются скриптом, то поведение элемента не будет однозначно определено.

Источник: http://www.w3.org/TR/REC-CSS2/visuren.html#q24

Оставьте комментарий