float
Прижимает элемент к левому или правому краю, чтобы текст обтекал его.
Синтаксис
float: left;Значения
| Параметр | Тип | Описание |
|---|---|---|
| left | keyword | К левому краю, текст справа. |
| right | keyword | К правому краю, текст слева. |
| none | keyword | Без обтекания (по умолчанию). |
Примеры
Текст обтекает картинку:
<img src="/media/photo-200x200.jpg" alt="" width="90" style="float: left; margin: 0 12px 4px 0;">
<p>The text flows around the picture on the right. Floats were once used to build entire layouts; today they serve their original purpose — wrapping text around images, like in a magazine article.</p>Примечания
Используйте float только для обтекания. Для колонок и рядов flexbox и grid гораздо проще. Родитель не растягивается под плавающих детей — display: flow-root у родителя это исправляет.
См. также
- clear — Заставляет элемент начаться ниже плавающих элементов перед ним.
- ::first-letter — Оформляет первую букву первой строки блока — для буквиц.
- display — Определяет, как элемент ведёт себя в потоке и как раскладывает содержимое.
- shape-outside — Задаёт форму, которую обтекает текст рядом с плавающим элементом, — круг, многоугольник или контур картинки.
Вопросы и ответы по теме
В учебнике
- Обтекание: float — Как работает float, обтекание картинки текстом, clear и display: flow-root, и почему колонки сегодня строят на flexbox и grid.