Свойство 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 |