Классы float-* задают свойство float: элемент выходит из обычного потока,
прижимается к началу или концу строки, а текст и строчные элементы обтекают
его. Берите их для изображений и врезок внутри текста.
Пример
Сторона обтекания
Подпись над образцом — класс, который стоит на изображении.
HTML
<divclass="grid grid-col-1 sm:grid-col-3 gap-4 color-on-surface">
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">float-inline-start</code>
<divclass="flow-root p-1 border border-dashed border-outline radius-ui">
<imgsrc="assets/color-study.jpg"class="float-inline-start w-e5 aspect-4x3 object-cover radius-ui m-inline-end-2 m-bottom-1"alt="">
<pclass="m-0">Изображение прижато к началу строки, а текст абзаца обтекает его с другой стороны и продолжается под ним.</p>
</div>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">float-inline-end</code>
<divclass="flow-root p-1 border border-dashed border-outline radius-ui">
<imgsrc="assets/color-study.jpg"class="float-inline-end w-e5 aspect-4x3 object-cover radius-ui m-inline-start-2 m-bottom-1"alt="">
<pclass="m-0">Изображение прижато к концу строки, а текст абзаца обтекает его с другой стороны и продолжается под ним.</p>
</div>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">float-none</code>
<divclass="flow-root p-1 border border-dashed border-outline radius-ui">
<imgsrc="assets/color-study.jpg"class="float-none w-e5 aspect-4x3 object-cover radius-ui m-bottom-1"alt="">
<pclass="m-0">Изображение остаётся в потоке: текст абзаца начинается под ним, обтекания нет.</p>
</div>
</div>
</div>
Обтекание и ширина экрана
С префиксом ширины класс действует от указанной ширины и шире. Меняйте ширину
окна просмотра: до ширины md изображение стоит над текстом, начиная с md
текст его обтекает.
HTML
<divclass="flex flex-col gap-1 color-on-surface">
<codeclass="text-1/2 color-on-surface-variant">float-none md:float-inline-start</code>
<divclass="flow-root p-1 border border-dashed border-outline radius-ui">
<imgsrc="assets/color-study.jpg"class="float-none md:float-inline-start w-e8 aspect-4x3 object-cover radius-ui m-bottom-1 md:m-inline-end-2"alt="">
<pclass="m-0">На узком экране изображение стоит над текстом. Начиная с ширины md оно прижимается к началу строки, и текст обтекает его. Ширину окна просмотра можно менять, чтобы увидеть оба состояния.</p>
</div>
</div>
Классы
Класс
CSS
Значения
float-inline-end
float: inline-end
—
float-inline-start
float: inline-start
—
float-none
float: none
—
Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:float-inline-end.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Логические стороны
float-inline-start прижимает элемент к началу строки, float-inline-end — к
концу. В документе с письмом слева направо это левый и правый край, с письмом
справа налево (dir="rtl") — правый и левый. Отступ от текста задавайте с той
же логической стороны: m-inline-end-* у float-inline-start и
m-inline-start-* у float-inline-end.
HTML
<imgclass="float-inline-start w-e5 m-inline-end-2 m-bottom-1"src="photo.jpg"alt="Фото">
<p>Текст обтекает изображение с другой стороны и продолжается под ним.</p>
Обтекание только на широком экране
На узком экране обтекание оставляет тексту слишком мало места. Включайте его
с нужной ширины, а float-none оставляйте базовым значением:
Плавающий элемент не растягивает родителя по высоте. Чтобы контейнер охватил
его, поставьте на контейнер flow-root.
Чтобы следующий блок начался ниже плавающего элемента, поставьте на него
класс clear-*.
Ограничения
На прямых потомках флекс- и грид-контейнеров float не действует. Для
раскладки колонок используйте флекс или
грид, а float — для обтекания текстом.
