ГРУППА КУРСА
|
Главная >
Учебник CSS >
Обтекание элементовВ CSS есть возможность установить обтекание элемента. При этом элемент смещается максимально к левому либо к правому краю страницы или внешнего блока. А элементы, следующие за ним, обтекают его. Обтекание устанавливается с помощью свойства float. Значения свойства: float: left; - элемент смещается влево, другие элементы обтекают его справа float: right; - элемент смещается вправо, другие элементы обтекают его слева float: none; - отмена обтекания float: inherit; - значение принимается от родительского элемента Пример использования свойства float - это обтекание картинки текстом. Выглядит это так:
Чтобы сделать такое обтекание, картинку нужно поместить в абзац или другой блок и установить ей свойство float. Стиль: +
HTML код:
Элементы со свойством float имеют ряд особенностей:
Для примера добавим на страницу блок и установим ему свойство float. Создадим ещё несколько блоков и посмотрим, как они будут размещаться. Они должны быть шире первого блока. Стиль:
HTML код:
Если свойство float задано нескольким элементам подряд, то эти элементы располагаются в одну строку. Первый элемент смещается к краю страницы или блока, следующий элемент присоединяется к нему и все остальные выстраиваются друг за другом. Если элементы занимают всю ширину страницы или блока, то следующий элемент переносится на новую строку и остальные элементы располагаются в этой строке. Таким образом, элементы могут занять несколько строк. Чтобы посмотреть как это работает, добавим зелёному блоку свойство float:
Теперь добавим это свойство ещё и синему блоку:
Чтобы контент, следующий за элементами с float не перемещался на их место, можно поместить эти элементы во внешний контейнер и задать ему высоту. Если высота заранее не известна, то контейнеру можно установить свойство overflow со значением hidden или auto. Тогда элементы с float влияют на высоту контейнера. Иногда говорят, что элементы со свойством float выпадают из основного потока документа, как при позиционировании. Но рассмотренный приём, доказывает, что это не так. Нужно не забывать, что элементы могут не поместиться в одну строку и занять несколько строк. У различных устройств разные размеры экранов и разное разрешение и в зависимости от этого количество строк может отличаться. |