HTML-верстка: инструменты и приемы профессиональной front-end разработки

Свойство float


назад вперед

Что такое float?



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

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


Как действует свойство float

Свойство float перемещает элемент только по горизонтали.

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

Элемент, следующий за смещаемым элементом обтекает его.

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

Пример

img
{
float:right;
}

Посмотреть


Несколько смещаемых элементов друг за другом

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

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

Пример

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

Посмотреть


Запрет обтекания элемента — свойство clear

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

Свойство clear указывает на то, с какой стороны запрещено обтекать элемент.

Пример

.text_line
{
clear:both;
}

Посмотреть


Примеры

Выравнивание изображения в параграфе по правому краю

Выравнивание изображения с подписью по правому краю

Буквица

Создание горизонтального меню

Разметка сайта на элементах div (без таблиц)


Float — справка CSS

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

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


Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта