布局
清除
用于控制元素周围内容环绕方式的实用工具。
| 类名 | 样式 |
|---|---|
clear-left | clear: left; |
clear-right | clear: right; |
clear-both | clear: both; |
clear-start | clear: inline-start; |
clear-end | clear: inline-end; |
clear-none | clear: none; |
示例
清除左侧浮动
使用 clear-left 实用工具将元素定位在任何先前的左浮动元素下方
也许我们可以没有图书馆也能生活，像你我这样的人。也许吧。当然，我们太老了，无法改变世界，但是那个孩子呢，现在正坐在当地图书馆的分馆里，打开一本书，却发现《戴帽子的猫》和《五兄弟》上画满了小鸡鸡和小弟弟？难道他不应该得到更好的吗？听着。如果你认为这只是关于逾期罚款和丢失的书籍，那你最好再想想。这关系到那个孩子有权阅读书籍而不被扭曲思想！或者：也许这让你兴奋，Seinfeld；也许这就是你获得快感的方式。你和你的好哥们儿们。
<article> <img class="float-left ..." src="/img/snow-mountains.jpg" /> <img class="float-right ..." src="/img/green-mountains.jpg" /> <p class="clear-left ...">Maybe we can live without libraries...</p></article>清除右侧浮动
使用 clear-right 实用工具将元素定位在任何先前的右浮动元素下方
也许我们可以没有图书馆也能生活，像你我这样的人。也许吧。当然，我们太老了，无法改变世界，但是那个孩子呢，现在正坐在当地图书馆的分馆里，打开一本书，却发现《戴帽子的猫》和《五兄弟》上画满了小鸡鸡和小弟弟？难道他不应该得到更好的吗？听着。如果你认为这只是关于逾期罚款和丢失的书籍，那你最好再想想。这关系到那个孩子有权阅读书籍而不被扭曲思想！或者：也许这让你兴奋，Seinfeld；也许这就是你获得快感的方式。你和你的好哥们儿们。
<article> <img class="float-left ..." src="/img/green-mountains.jpg" /> <img class="float-right ..." src="/img/snow-mountains.jpg" /> <p class="clear-right ...">Maybe we can live without libraries...</p></article>清除所有浮动
使用 clear-both 实用工具将元素定位在所有先前的浮动元素下方
也许我们可以没有图书馆也能生活，像你我这样的人。也许吧。当然，我们太老了，无法改变世界，但是那个孩子呢，现在正坐在当地图书馆的分馆里，打开一本书，却发现《戴帽子的猫》和《五兄弟》上画满了小鸡鸡和小弟弟？难道他不应该得到更好的吗？听着。如果你认为这只是关于逾期罚款和丢失的书籍，那你最好再想想。这关系到那个孩子有权阅读书籍而不被扭曲思想！或者：也许这让你兴奋，Seinfeld；也许这就是你获得快感的方式。你和你的好哥们儿们。
<article> <img class="float-left ..." src="/img/snow-mountains.jpg" /> <img class="float-right ..." src="/img/green-mountains.jpg" /> <p class="clear-both ...">Maybe we can live without libraries...</p></article>使用逻辑属性
使用 clear-start 和 clear-end 实用工具，它们使用逻辑属性根据文本方向映射到左侧或右侧
ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد، نحن أكبر من أن نغير العالم، ولكن ماذا عن ذلك الطفل الذي يجلس ويفتح كتابًا الآن في أحد فروع المكتبة المحلية ويجد رسومات للتبول والبول على القطة في القبعة والإخوة الصينيون الخمسة؟ ألا يستحق الأفضل؟ ينظر. إذا كنت تعتقد أن الأمر يتعلق بالغرامات المتأخرة والكتب المفقودة، فمن الأفضل أن تفكر مرة أخرى. يتعلق الأمر بحق ذلك الطفل في قراءة كتاب دون أن يتشوه عقله! أو: ربما يثيرك هذا يا سينفيلد؛ ربما هذه هي الطريقة التي تحصل بها على ركلاتك. أنت ورفاقك الطيبين.
<article dir="rtl"> <img class="float-left ..." src="/img/green-mountains.jpg" /> <img class="float-right ..." src="/img/green-mountains.jpg" /> <p class="clear-end ...">...ربما يمكننا العيش بدون مكتبات،</p></article>禁用清除
使用 clear-none 实用工具重置应用于元素的任何清除
也许我们可以没有图书馆也能生活，像你我这样的人。也许吧。当然，我们太老了，无法改变世界，但是那个孩子呢，现在正坐在当地图书馆的分馆里，打开一本书，却发现《戴帽子的猫》和《五兄弟》上画满了小鸡鸡和小弟弟？难道他不应该得到更好的吗？听着。如果你认为这只是关于逾期罚款和丢失的书籍，那你最好再想想。这关系到那个孩子有权阅读书籍而不被扭曲思想！或者：也许这让你兴奋，Seinfeld；也许这就是你获得快感的方式。你和你的好哥们儿们。
<article> <img class="float-left ..." src="/img/green-mountains.jpg" /> <img class="float-right ..." src="/img/snow-mountains.jpg" /> <p class="clear-none ...">Maybe we can live without libraries...</p></article>响应式设计
前缀一个 clear 实用工具 使用断点变体（如 md: ）仅在中等 屏幕尺寸及以上情况下应用实用工具
<p class="clear-left md:clear-none ..."> Lorem ipsum dolor sit amet...</p>在变体文档中了解有关使用变体的更多信息。