Создание сайтов с нуля - урок 33 - Свойство float - обтекание элементов

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

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

Свойство float

Изначально свойство float было предназначено для того, чтобы включать обтекание элементов (например, изображений) текстом.

Свойство float имеет следующие значения:

• left - прижимает элемент к левому краю родителя, другие элементы обтекают его справа;
• right - прижимает элемент к правому краю родителя, другие элементы обтекают его слева;
• none - отключает режим обтекания и возвращает элементу нормальное поведение.

Воздействие свойства float на элементы

Зафлоченные элементы заставляют элементы как бы «выпадать» из потока, им можно явно задавать размеры и отступы.

Если мы задаём блочному элементу свойство float:left или float:right, то он прижимается к левому или правому краю, а также начинает ужиматься по ширине под своё содержимое. С той стороны, которая не прижата к краю родителя, появляется свободное место. Это место может быть занято другими элементами.

Если зафлоатить строчный элемент, то он начинает вести себя как блочный, а именно: воспринимать размеры и отступы.

Воздействие свойства float на последующие элементы

Блочные элементы, которые идут в коде после зафлоченного блока, перестают его замечать. Они проваливаются вверх, как будто зафлоченного элемента нет вообще в потоке. Но текст внутри блоков обтекает зафлоченные элементы.

Строчные элементы, расположенные в коде после зафлоаченного блока, начинают обтекать его со свободной стороны.

Свойство clear

Свойство clear запрещает обтекание элемента другими элементами. Вот его значения:

• left - запрещено обтекание слева;
• right - запрещено обтекание справа;
• both - запрещено обтекание с обеих сторон;
• none - обтекание разрешено.

Если после флоатного элемента расположен элемент с запрещённым обтеканием, то последний опускается под флоатный.

Свойство clear учит блочные элементы «видеть» зафлоаченные.

Борьба с выпаданием флоатов

Для борьбы с выпадением зафлоченных элементов из потока используется разные методы, но самые распространенных из них это:

• использование «распорок» в виде дополнительного пустого блочного элемента со свойством clear:both после зафлоченных элементов;
• использование псевдораспорок в виде сгенерированных псевдоэлементов after.