search
Перенос после плавающих элементов (clear)
https://dev.ru.simai.io/ru/ui/utility/layout/clear.php
Модификаторы clear управляют тем, как контент будет располагаться относительно плавающих элементов (float). Они
определяют, вниз под какими плавающими элементами (слева, справа, или с обеих сторон) будет смещаться контент.
Синтаксис
Использование: {условие действия}:{модификатор}
-
Условие действия (необязательный параметр):
Может принимать значения:sm— для экранов шириной от 540px и больше;md— для экранов шириной от 768px и больше;lg— для экранов шириной от 960px и больше;xl— для экранов шириной от 1140px и больше;xxl— для экранов шириной от 1320px и больше.
Если условие действия не указано, модификатор применяется ко всем размерам.
-
Модификатор (обязательный параметр):
clear-left— элемент уходит вниз под «плавающими» слева элементами.clear-right— элемент уходит вниз под «плавающими» справа элементами.clear-both— элемент уходит вниз под «плавающими» слева и справа элементами.clear-none— элемент не уходит вниз под «плавающими» элементами.
Примеры
clear-left
Используйте clear-left для смещения элемента вниз под плавающими слева элементами.
<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:, xxl:) к
модификатору.
Например, чтобы смещать элемент вниз под плавающими справа элементами только на экранах размера Medium и больше:
<div class="md:clear-right"></div>