布局
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" />了解更多关于在变体文档中使用变体的信息。
