Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

CSS Урок 20 Плавающие Элементы


« Назад Далее »

Что Такое Плавающие Элементы CSS?



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

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


Как Ведут Себя Плавающие Элементы

Элементы плавают горизонтально, это означает, что элемент может плавать только слева или справа, но не снизу или сверху.

Плавающий элемент будет помещен влево или вправо настолько, насколько это возможно.

Элементы после плавающего элемента будут обтекать вокруг него.

Элементы до плавающего элемента не будут подвержены воздействию.

Если изображение плавает справа, следующий за ним текст будет пристыкован слева от него:

Пример

img
{
float:right;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает


Плавающие Элементы, Следующие Друг за Другом

Если вы располагаете несколько плавающих элементов друг за другом, они будут "плавать" друг за другом, если позволяет пространство.

Здесь мы сделали галерею изображений, используя свойство float:

Пример

.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает


Отключение Float - Использование Clear

Элементы после плавающего элемента будут "плавать" вокруг него. Чтобы избежать этого, используйте свойство clear.

Свойство clear указывает, какие стороны элемента запрещены к воздействию других плавающих элементов.

Добавим строку текста к галерее изображений, используя свойство clear:

Пример

.text_line
{
clear:both;
margin-bottom:2px;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает


Примеры

Еще примеры

Изображение с границей и полями, которое плавает справа от параграфа
Позволить изображению плавать справа от параграфа. Добавить границу и поля к изображению.

Изображение с заголовком, которое плавает справа
Позволить изображению с заголовком плавать справа.

Позволить первой букве параграфа плавать слева
Позволить первой букве параграфа плавать слева. Оформить эту букву.

Создание горизонтального меню
Использование свойства float со списком гиперссылок с целью создать горизонтальное меню.

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


Все CSS Свойства Плавающих Элементов

Число в столбце "CSS" указывает, в какой версии CSS определено свойство (CSS1 или CSS2).

Свойство Описание Значения CSS
clear Указывает, по каким сторонам элемента не допускаются другие плавающие элементы left
right
both
none
inherit
1
float Указывает, должен или нет элемент плавать left
right
none
inherit
1




« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru