Поток документа
Поток — это порядок отображения элементов на странице. По умолчанию блочные элементы отображаются как прямоугольные области, идущие друг за другом сверху вниз, а строчные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку. Потоком можно управлять и изменять привычное поведение элементов в потоке. Например, можно заставить блочные элементы двигаться не сверху вниз, а выстраиваться в несколько колонок.
Свойство float
Изначально свойство float было предназначено для того, чтобы включать обтекание элементов (например, изображений) текстом.
Свойство float имеет следующие значения:
- left - прижимает элемент к левому краю родителя, другие элементы обтекают его справа;
- right - прижимает элемент к правому краю родителя, другие элементы обтекают его слева;
- none - отключает режим обтекания и возвращает элементу нормальное поведение.
Воздействие свойства float на элементы
Зафлоченные элементы заставляют элементы как бы «выпадать» из потока, им можно явно задавать размеры и отступы.
Если мы задаём блочному элементу свойство float:left или float:right, то он прижимается к левому или правому краю, а также начинает ужиматься по ширине под своё содержимое. С той стороны, которая не прижата к краю родителя, появляется свободное место. Это место может быть занято другими элементами.
Если зафлоатить строчный элемент, то он начинает вести себя как блочный, а именно: воспринимать размеры и отступы.
Воздействие свойства float на последующие элементы
Блочные элементы, которые идут в коде после зафлоченного блока, перестают его замечать. Они проваливаются вверх, как будто зафлоченного элемента нет вообще в потоке. Но текст внутри блоков обтекает зафлоченные элементы.
Строчные элементы, расположенные в коде после зафлоаченного блока, начинают обтекать его со свободной стороны.
Свойство clear
Свойство clear запрещает обтекание элемента другими элементами. Вот его значения:
- left - запрещено обтекание слева;
- right - запрещено обтекание справа;
- both - запрещено обтекание с обеих сторон;
- none - обтекание разрешено.
Если после флоатного элемента расположен элемент с запрещённым обтеканием, то последний опускается под флоатный.
Свойство clear учит блочные элементы «видеть» зафлоаченные.
Борьба с выпаданием флоатов
Для борьбы с выпадением зафлоченных элементов из потока используется разные методы, но самые распространенных из них это:
- использование «распорок» в виде дополнительного пустого блочного элемента со свойством clear:both после зафлоченных элементов;
- использование псевдораспорок в виде сгенерированных псевдоэлементов after.
