Свойство float

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

float: left;
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все

Значения

float: none;

Убирает обтекание у элемента

float: left;

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

<style>
.image-fl {
    float: left; 
    margin-right: 10px;
}
</style>

<div class="example-1">
    <img class="image-fl" src="https://placehold.it/100x100/333" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Eos, fugit facere praesentium inventore. Itaque, minima,
    similique, soluta, quisquam vel quis cum at iusto dolorum
    minus ipsa debitis hic veritatis. Illo.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Eos, fugit facere praesentium inventore.</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, fugit facere praesentium inventore. Itaque, minima, similique, soluta, quisquam vel quis cum at iusto dolorum minus ipsa debitis hic veritatis. Illo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, fugit facere praesentium inventore.

float: right;

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

Данное свойство используется все реже. Раньше его часто использовали для создания структуры сайта, но потом на смену пришли flexbox

<style>
.image-fr {
    float: right; 
    margin-left: 10px;
}
</style>

<div class="example-2">
    <img class="image-fr" src="https://placehold.it/100x100/333" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Eos, fugit facere praesentium inventore. Itaque, minima,
    similique, soluta, quisquam vel quis cum at iusto dolorum
    minus ipsa debitis hic veritatis. Illo.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Eos, fugit facere praesentium inventore praesentium inventore.</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, fugit facere praesentium inventore. Itaque, minima, similique, soluta, quisquam vel quis cum at iusto dolorum minus ipsa debitis hic veritatis. Illo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, fugit facere praesentium inventore praesentium inventore.

Читайте также

Обсуждение (2)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии


Владислав Гагарский
В результатах примера не видно картинку!
  • Денис
    Перейди по ссылке изображения. Браузер блокирует ссылку, а следовательно и изображение. После разрешения открывать страницу картинка появится.