Сброс

Класс	Свойства
clear-start	clear: inline-start;
clear-end	clear: inline-end;
clear-left	clear: left;
clear-right	clear: right;
clear-both	clear: both;
clear-none	clear: none;

Основы использования

Очистка плавающих элементов в влево

Используйте clear-left, чтобы разместить элемент под любыми предыдущими элементами, обтекающими слева.

Может быть, мы сможем жить без библиотек, такие люди, как ты и я. Может быть. Конечно, мы слишком стары, чтобы изменить мир, но как насчет того ребенка, который сел, открыл книгу прямо сейчас в отделении местной библиотеки и нашел рисунки пи-пи и пи-пи на Коте в Шляпа и пять китайских братьев? Разве ОН не заслуживает лучшего? Смотреть. Если вы думаете, что речь идет о просроченных штрафах и недостающих книгах, вам лучше подумать еще раз. Речь идет о праве этого ребенка читать книгу, не искажая свой разум! Или: может быть, это тебя заводит, Сайнфелд; может быть, это то, как ты получаешь удовольствие. Ты и твои веселые приятели.

<article>
  <img class="float-left ..." src="path/to/image.jpg">
  <img class="float-right ..." src="path/to/image.jpg">
  <p class="clear-left ...">Может быть, мы сможем жить без библиотек...</p>
</article>

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

Используйте clear-right, чтобы расположить элемент под любыми предыдущими элементами, обтекающими справа.

<article>
  <img class="float-left ..." src="path/to/image.jpg">
  <img class="float-right ..." src="path/to/image.jpg">
  <p class="clear-right ...">Может быть, мы сможем жить без библиотек...</p>
</article>

Очистка всех плавающих элементов

Используйте clear-both, чтобы разместить элемент под всеми предыдущими плавающими элементами.

<article>
  <img class="float-left ..." src="path/to/image.jpg">
  <img class="float-right ..." src="path/to/image.jpg">
  <p class="clear-both ...">Может быть, мы сможем жить без библиотек...</p>
</article>

Отключение примененных очисток

Используйте clear-none, чтобы сбросить все примененное к элементу. Это значение по умолчанию для свойства clear.

<article>
  <img class="float-left ..." src="path/to/image.jpg">
  <img class="float-right ..." src="path/to/image.jpg">
  <p class="clear-none ...">Может быть, мы сможем жить без библиотек...</p>
</article>

Использование логических свойств

Используйте логические свойства clear-start или clear-end, которые отображаются либо слева, либо слева правая сторона в зависимости от направления текста.

ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد، نحن أكبر من أن نغير العالم، ولكن ماذا عن ذلك الطفل الذي يجلس ويفتح كتابًا الآن في أحد فروع المكتبة المحلية ويجد رسومات للتبول والبول على القطة في القبعة والإخوة الصينيون الخمسة؟ ألا يستحق الأفضل؟ ينظر. إذا كنت تعتقد أن الأمر يتعلق بالغرامات المتأخرة والكتب المفقودة، فمن الأفضل أن تفكر مرة أخرى. يتعلق الأمر بحق ذلك الطفل في قراءة كتاب دون أن يتشوه عقله! أو: ربما يثيرك هذا يا سينفيلد؛ ربما هذه هي الطريقة التي تحصل بها على ركلاتك. أنت ورفاقك الطيبين.

<article dir="rtl">
  <img class="float-start ..." src="path/to/image.jpg">
  <img class="float-end ..." src="path/to/image.jpg">
  <p class="clear-end ...">...ربما يمكننا العيش بدون مكتبات،</p>
</article>

Применяя условно

Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:clear-none, чтобы применять утилиту clear-none только при hover.

<p class="clear-left hover:clear-none">
  <!-- ... -->
</p>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Контрольные точки и медиа-запросы

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

<p class="clear-left md:clear-none">
  <!-- ... -->
</p>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.

Краткая справка