版面配置
清除 (clear)
用於控制元素周圍內容換行的公用程式。
| 類別 | 樣式 |
|---|---|
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>停用清除 (Disabling clears)
使用 clear-none 工具類來重置應用於元素的任何清除 (clears)
也許我們沒有程式庫也能生存，像你我這樣的人。也許。當然，我們太老了，無法改變世界，但那個孩子呢？他正坐下來，打開一本書，就在此刻，在當地圖書館的分館，並在《戴帽子的貓》和《五個中國兄弟》上發現了小雞雞和尿尿的圖畫？他難道不值得更好嗎？聽著。如果你認為這與逾期罰款和遺失的書籍有關，你最好再想想。這關係到那個孩子有權閱讀一本書而不讓他的思想扭曲！或者：也許這會讓你興奮，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>響應式設計
前綴 (Prefix)a clear 工具類 加上一個斷點變體，例如 md:，以便僅在中等 (medium) 螢幕尺寸及以上時應用該工具類
<p class="clear-left md:clear-none ..."> <!-- ... --></p>在變體文件中了解更多關於使用變體的資訊。
