布局
清除
控制内容环绕元素的工具类
| 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 工具类将元素位置放置在所有前面的左浮动元素下方：
也许我们可以不靠图书馆生活，像你我这样的人。也许。没错， 我们太老了无法改变世界，但那孩子呢，坐在那里，打开一本书，正在当地图书馆的分馆，看到《帽子里的猫》和《五个中国兄弟》上的小便和尿尿的插图？难道他不值得更好吗？听着。如果你认为这与逾期罚款和失踪的书籍有关，那你最好再想想。这关乎那个孩子在不扭曲心智的情况下阅读一本书的权利！或者：也许这让你感到兴奋，塞infeld；也许这就是你寻求刺激的方式。你和你那些好时光的伙伴们。
<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 工具类将元素位置放置在所有前面的右浮动元素下方：
也许我们可以不靠图书馆生活，像你我这样的人。也许。没错， 我们太老了无法改变世界，但那孩子呢，坐在那里，打开一本书，正在当地图书馆的分馆，看到《帽子里的猫》和《五个中国兄弟》上的小便和尿尿的插图？难道他不值得更好吗？听着。如果你认为这与逾期罚款和失踪的书籍有关，那你最好再想想。这关乎那个孩子在不扭曲心智的情况下阅读一本书的权利！或者：也许这让你感到兴奋，塞infeld；也许这就是你寻求刺激的方式。你和你那些好时光的伙伴们。
<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 工具类将元素位置放置在所有前面的浮动元素下方：
也许我们可以不靠图书馆生活，像你我这样的人。也许。没错， 我们太老了无法改变世界，但那孩子呢，坐在那里，打开一本书，正在当地图书馆的分馆，看到《帽子里的猫》和《五个中国兄弟》上的小便和尿尿的插图？难道他不值得更好吗？听着。如果你认为这与逾期罚款和失踪的书籍有关，那你最好再想想。这关乎那个孩子在不扭曲心智的情况下阅读一本书的权利！或者：也许这让你感到兴奋，塞infeld；也许这就是你寻求刺激的方式。你和你那些好时光的伙伴们。
<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 工具类重置应用于元素的任何清除设置：
也许我们可以不靠图书馆生活，像你我这样的人。也许。没错， 我们太老了无法改变世界，但那孩子呢，坐在那里，打开一本书，正在当地图书馆的分馆，看到《帽子里的猫》和《五个中国兄弟》上的小便和尿尿的插图？难道他不值得更好吗？听着。如果你认为这与逾期罚款和失踪的书籍有关，那你最好再想想。这关乎那个孩子在不扭曲心智的情况下阅读一本书的权利！或者：也许这让你感到兴奋，塞infeld；也许这就是你寻求刺激的方式。你和你那些好时光的伙伴们。
<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.