Перенос после плавающих элементов

clear

Классы

Класс	Значение
`clear-left`	`clear: left;`
`clear-right`	`clear: right;`
`clear-both`	`clear: both;`
`clear-none`	`clear: none;`

Описание

Модификатор управляет переносом контента после плавающих элементов.

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

Условие действия. Необязательный параметр. Определяет условие действия модификатора. Может принимать значения:

sm — для экранов small и больше.
md — для экранов medium и больше.
lg — для экранов large и больше.
xl — для экранов extra large и больше.

Модификатор. Обязательный параметр.
- clear-left — элемент уходит вниз под «плавающими» слева элементами.
- clear-right — элемент уходит вниз под «плавающими» справа элементами.
- clear-both — элемент уходит вниз под «плавающими» слева и справа элементами.
- clear-none — элемент не уходит вниз под «плавающими» элементами.

Примеры

clear-left

С помощью модификатора clear-left элемент уходит вниз под «плавающими» слева элементами.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla.

<div class="clear-left ... "></div>
<p>Lorem ipsum dolor ... </p>

clear-right

С помощью модификатора clear-right элемент уходит вниз под «плавающими» справа элементами.

<div class="clear-right ... "></div>
<p>Lorem ipsum dolor ... </p>

clear-both

С помощью модификатора clear-both элемент уходит вниз под «плавающими» слева и справа элементами.

<div class="clear-both ... "></div>
<p>Lorem ipsum dolor ... </p>

clear-none

С помощью модификатора clear-none элемент не уходит вниз под «плавающими» элементами.

<div class="clear-none ... "></div>
<p>Lorem ipsum dolor ... </p>

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

Для управления переносом контента после плавающих элементов, начиная с определенного размера области просмотра, добавьте префикс контрольной точки ( sm, md, lg, xl ) через двоеточие (:) к модификатору.

Например, воспользуйтесь модификатором md:clear-right для переноса контента после плавающих справа элементов для экранов размером Medium и больше.

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

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью