布局
clear
用于控制内容环绕元素方式的工具类。
| Class | Styles |
|---|---|
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 ...">也许我们可以没有图书馆也能生活...</p></article>清除右侧浮动
使用 clear-right 工具类将元素定位在任何右侧浮动元素的下方：
也许像你我这样的人可以没有图书馆也能生活。也许吧。当然，我们年纪太大改变不了世界，但那个孩子呢？此刻正坐在当地图书馆的分馆里，打开一本书，发现《戴帽子的猫》和《五个中国兄弟》上画着小鸡鸡和小便便？难道他不该得到更好的吗？听着，如果你认为这只是关于逾期罚款和丢失的书籍，那你最好再想想。这关乎那个孩子阅读一本不会扭曲他思想的书的权利！或者：也许这让你兴奋，宋飞；也许这就是你找乐子的方式。你和你的好伙伴们。
<article> <img class="float-left ..." src="/img/green-mountains.jpg" /> <img class="float-right ..." src="/img/snow-mountains.jpg" /> <p class="clear-right ...">也许我们可以没有图书馆生活...</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 ...">也许我们可以没有图书馆也能生活...</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 ...">也许我们可以没有图书馆而生活...</p></article>响应式设计
Prefix a clear utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<p class="clear-left md:clear-none ..."> Lorem ipsum dolor sit amet...</p>Learn more about using variants in the variants documentation.