Свойство float
Делает элемент "плавающим". Размещает элемент с левой или правой стороны его контейнера. Следующие элементы будут обтекать плавающий элемент с другой стороны. Для очистки обтеканий используется свойство clear
float: left;
Значения
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)
Войдите или зарегистрируйтесь для того чтобы оставлять комментарии
-
ДенисПерейди по ссылке изображения. Браузер блокирует ссылку, а следовательно и изображение. После разрешения открывать страницу картинка появится.