Tailwind CSS - 浮动

Tailwind CSS 浮动是一个用于控制元素或内容浮动的实用程序类。它允许内容向右、向左浮动，或将其对齐在元素的开头和结尾。

Tailwind CSS 浮动类

以下是Tailwind CSS 浮动类列表，它提供了一种有效的方式来围绕元素对齐内容。

类名	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; 属性。它根据文本方向将元素设置成浮动在内联起始侧。
float-end: 此类替换 CSS float: inline-end; 属性。它根据文本方向将元素设置成浮动在内联结束侧。
float-right: 此类替换 CSS float: right; 属性，使元素浮动在其容器的右侧。
float-left: 此类替换 CSS float: left; 属性，使元素浮动在其容器的左侧。
float-none: 此类替换 CSS float: none; 属性，确保元素不会浮动。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 浮动类示例

以下示例将说明 Tailwind CSS 浮动类的实用程序。

Tailwind CSS float-start 和 float-end 类

以下示例说明了Tailwind CSS float-start 和 float-end 类的用法。

示例

Open Compiler

<!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类的用法。

示例

Open Compiler

<!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类的用法。

示例

Open Compiler

<!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类的用法。

示例

Open Compiler

<!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>

打印页面