清除 - Tailwind CSS

Class	Properties
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;

Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

<article>
  <img class="float-left ..." src="path/to/image.jpg">
  <img class="float-right ..." src="path/to/image.jpg">
  <p class="clear-left ...">Maybe we can live without libraries...</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 ...">Maybe we can live without libraries...</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 ...">Maybe we can live without libraries...</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 ...">Maybe we can live without libraries...</p>
</article>

使用逻辑属性

使用 clear-start 或 clear-end logical properties，根据文本方向映射到左侧或右侧。

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

<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 来仅在 hover应用 clear-none.

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

详细了解, 请参考 Hover, Focus, & Other States 文档.

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:clear-none 来应用 clear-none 程序，适用于中等屏幕尺寸及以上。

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

进一步了解，请参考响应式设计, 暗黑模式和媒体查询.

清除

Quick reference

基础用法

清除左浮动元素