# Введение в свойство float в CSS

Пусть у нас есть див с каким-то длинным текстом. Давайте вставим в начало этого текста картинку:

`<div> <img src="img.png" alt=""> long text... </div>` `div { width: 400px; text-align: justify; }`

:

Как вы видите, низ картинки располагается на первой строке текста, а остальная часть уходит вверх. Справа от картинки получается большое пустое пространство. Давайте сделаем так, чтобы текст заполнил это пустое пространство. Для этого картинке поставим свойство `float` в значении `left`:

`<div> <img src="img.png" alt=""> long text... </div>` `div { width: 400px; text-align: justify; } img { float: left; }`

:

Итак, теперь картинка плавает слева, а текст обтекает ее соответственно справа. При этом пустое пространство сбоку от картинки исчезло.

Можно заставить картинку плавать не слева, а справа. Для этого `float` установим в значение `right`:

`<div> <img src="img.png" alt=""> long text... </div>` `div { width: 400px; text-align: justify; } img { float: right; }`

:

Возьмите длинный текст. Вставьте в начало текста одну картинку, а в середину - другую. Сделайте так, чтобы первая картинка плавала слева, а вторая - справа.

← →
↑