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