Плавающий элемент (float)link

https://dev.ru.simai.io/ru/ui/utility/layout/float.php

Модификаторы float управляют тем, как элемент обтекается текстом и другими элементами. Они определяют, по какой стороне будет «плавать» элемент относительно контента.

Синтаксисlink

Использование: {условие действия}:{модификатор}

• Условие действия (необязательный параметр):
  Может принимать значения:

  • sm — для экранов шириной от 540px и больше;
  • md — для экранов шириной от 768px и больше;
  • lg — для экранов шириной от 960px и больше;
  • xl — для экранов шириной от 1140px и больше;
  • xxl — для экранов шириной от 1320px и больше.

  Если условие действия не указано, модификатор применяется ко всем размерам.

• Модификатор (обязательный параметр):

  • float-right — элемент «плавает» справа;
  • float-left — элемент «плавает» слева;
  • float-none — элемент не «плавает».

Примерыlink

float-rightlink

С помощью float-right элемент будет «плавать» справа.

<img class="float-right ... " alt="Picture">
<p>Lorem ipsum dolor sit amet, ...</p>

float-leftlink

С помощью float-left элемент будет «плавать» слева.

<img class="float-left ... " alt="Picture">
<p>Lorem ipsum dolor sit amet, ...</p>

float-nonelink

С помощью float-none элемент не «плавает».

<img class="float-none ... " alt="Picture">
<p>Lorem ipsum dolor sit amet, ...</p>

Адаптивностьlink

Для применения стилей, начиная с определённой контрольной точки, добавьте префикс (sm:, md:, lg:, xl:, xxl:) к модификатору.

Например, чтобы элемент «плавал» справа только на экранах размера Medium и больше:

<div class="md:float-right"></div>