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

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

Модификаторы float управляют обтеканием и используют логические стороны (inline-start, inline-end), чтобы работать в LTR/RTL.

Синтаксисlink

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

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

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

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

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

  • float-inline-end — «плавание» по логической правой стороне;
  • float-inline-start — «плавание» по логической левой стороне;
  • float-none — элемент не «плавает».

Примерыlink

float-inline-endlink

Элемент «плавает» по логической правой стороне.

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

float-inline-startlink

Элемент «плавает» по логической левой стороне.

<img class="float-inline-start ... " 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>

Playgroundlink