Tailwind CSS - Float
Tailwind CSS Float 浮动类 是一个用于控制元素流或内容浮动的实用类。它允许内容向右、向左浮动，或使其与元素的首尾对齐。
Tailwind CSS Float 类
以下是 Tailwind CSS Float 类的列表，它们提供了一种有效的方法，可以围绕元素对齐内容。
| 类 | CSS 属性 |
|---|---|
| float-start | float: inline-start; |
| float-end | float: inline-end; |
| float-right | float: right; |
| float-left | float: left; |
| float-none | float: none; |
Tailwind CSS 浮动类的功能
- float-start: 此类替换 CSS float: inline-start; 属性。它根据文本的方向将元素设置为在 inline-start 侧浮动。
- float-end: 此类替换 CSS float: inline-end; 属性。它根据文本的方向将元素设置为在行内端浮动。
- float-right:此类替换 CSS float: right; 属性，使元素浮动在其容器的右侧。
- float-left:此类替换 CSS float: left; 属性，使元素浮动在其容器的左侧。
- float-none:此类替换 CSS float: none; 属性，确保元素不浮动。
Tailwind CSS Float 类示例
以下示例将说明 Tailwind CSS Float 类的实用功能。
Tailwind CSS Float-Start 和 Float-End 类
以下示例说明了 Tailwind CSS Float-Start 和Float-End 类。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-3">
<h2 class="font-bold text-xl">
Tailwind CSS FLoat-Start & Float-End
</h2>
<div class="border-4
p-2 mt-4">
<p>
<span class="float-start bg-pink-200">
Float-Start Content
</span>
<span class="float-end bg-blue-200">
Float-End Content
</span>
Content will be floated based on text direction.
</p>
</div>
</body>
</html>
Tailwind CSS Float-Right 类
以下示例演示了 Tailwind CSS Float-Right 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-3">
<h2 class="font-bold text-xl">
Tailwind CSS FLoat-Right
</h2>
<div class="bg-pink-200 p-3 mt-2">
<div class="float-right bg-blue-300 p-2">
Float Right
</div>
<p>
Tailwind CSS is a utility-first CSS framework
for designing web pages. "Utility-first" means
the framework focuses on providing utility classes.
It is a low-level CSS framework that is easy to
learn and fast to use in the project.
</p>
</div>
</body>
</html>
Tailwind CSS Float-Left 类
以下示例演示了 Tailwind CSS Float-Left 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-3">
<h2 class="font-bold text-xl">
Tailwind CSS FLoat-Left
</h2>
<div class="bg-pink-200 p-2 mt-2">
<div class="float-left bg-blue-300 p-2">
Float Left
</div>
<p>
Tailwind CSS is a utility-first CSS framework
for designing web pages. "Utility-first" means
the framework focuses on providing utility classes.
It is a low-level CSS framework that is easy to
learn and fast to use in the project.
</p>
</div>
</body>
</html>
Tailwind CSS Float-None 类
以下示例说明了 Tailwind CSS Float-None 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-3">
<h2 class="font-bold text-xl">
Tailwind CSS FLoat-None
</h2>
<div class="bg-pink-200 p-2 mt-2">
<div class="float-none bg-blue-300 p-2">
Float None
</div>
<p>
Tailwind CSS is a utility-first CSS framework
for designing web pages. "Utility-first" means
the framework focuses on providing utility classes.
It is a low-level CSS framework that is easy to
learn and fast to use in the project.
</p>
</div>
</body>
</html>
