Классы clear-* задают свойство clear: блок начинается ниже плавающих
элементов, стоящих перед ним с выбранной стороны. Берите их, когда после
изображения или врезки с обтеканием следующий
блок должен начаться с новой строки.
Пример
В каждом образце перед блоком стоят два плавающих элемента: короткий у начала
строки и высокий у конца. Подпись над образцом — класс, который стоит на
блоке.
Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:clear-inline-start.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Выбор стороны
clear-inline-start — блок начинается ниже элементов с float-inline-start.
clear-inline-end — блок начинается ниже элементов с float-inline-end.
clear-both — блок начинается ниже всех плавающих элементов.
clear-none — блок стоит рядом с плавающими элементами; класс отменяет
перенос, заданный другим классом или на меньшей ширине экрана.
HTML
<imgclass="float-inline-start w-e5 m-inline-end-2"src="photo.jpg"alt="Фото">
<p>Текст обтекает изображение.</p>
<h2class="clear-both">Следующий раздел начинается ниже изображения</h2>
Перенос на части экранов
С префиксом ширины класс действует от указанной ширины и шире:
HTML
<divclass="clear-both md:clear-none"></div>
Контейнер с плавающими элементами
Чтобы контейнер охватил свои плавающие элементы, вместо пустого блока с
clear-both в конце поставьте на контейнер
flow-root.
Ограничения
clear-inline-start задаёт clear: left, а clear-inline-end —
clear: right при любом направлении текста. В документе с письмом справа
налево (dir="rtl") стороны не совпадают с
float-inline-start и float-inline-end:
используйте clear-both.
На прямых потомках флекс- и грид-контейнеров clear не действует: там нет
обтекания.
