Tailwind CSS - 清除浮动

Tailwind CSS 清除浮动 是一个用于控制浮动元素周围元素流动的实用程序类。它是用于控制内容围绕元素换行的实用程序。

Tailwind CSS 清除浮动类

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

类	CSS 属性
clear-start	clear: inline-start;
clear-end	clear: inline-end;
clear-right	clear: right;
clear-left	clear: left;
clear-both	clear: both;
clear-none	clear: none;

Tailwind CSS 清除浮动类的功能

Clear-start: 此类替换 CSS Clear: inline-start; 属性。它根据文本方向清除内联开始侧的元素。
Clear-end: 此类替换 CSS Clear: inline-end; 属性。它根据文本方向清除内联结束侧的元素。
Clear-right: 此类替换 CSS Clear: right; 属性。它将元素移动到任何前面右浮动元素下方。
Clear-left: 此类替换 CSS Clear: left; 属性。它将元素移动到任何前面左浮动元素下方。
Clear-both: 此类替换 CSS Clear: both; 属性。它将元素移动到所有前面浮动元素下方。
Clear-none: 此类替换 CSS Clear: none; 属性，确保元素不清除。

Tailwind CSS 清除浮动类示例

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

清除浮动元素的开始和结束

以下示例说明了Tailwind CSS Clear-Start 和 Clear-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 Clear-Start
    </h2>
    <div class="border-4 p-2 mt-4">
        <span class="float-start bg-pink-200">
                Float-Start Content
            </span>
        <span class="float-end bg-blue-200 p-4">
                Float-End Content
            </span>
        <p class="clear-start">
            Clear-start class Clears the element 
            on the inline-start side based on the 
            direction of the text.
        </p>
    </div>
    <h2 class="font-bold text-xl">
        Tailwind CSS Clear-End
    </h2>
    <div class="border-4 p-2 mt-4">
        <span class="float-start bg-pink-200">
                Float-Start Content
            </span>
        <span class="float-end bg-blue-200 p-4">
                Float-End Content
            </span>
        <p class="clear-end">
            Clear-end class Clears the element
            on the inline-end side based on the
            direction of the text.
        </p>
    </div>
</body>

</html>

清除浮动元素的右侧

以下示例说明了Tailwind CSS Clear-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 Clear-Right
    </h2>
    <div class="bg-pink-200 p-2 mt-2">
        <div class="float-right bg-blue-300 p-2">
            Float None
        </div>
        <p class="clear-right">
            Clear-right class moves th element below
            any preceding right-floated element.
        </p>
    </div>
</body>
</html>

清除浮动元素的左侧

以下示例说明了Tailwind CSS Clear-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 Clear-Left
    </h2>
    <div class="bg-pink-200 p-2 mt-2">
        <div class="float-left bg-blue-300 p-2">
            Float None
        </div>
        <p class="clear-left">
            Clear-Left class moves th element below 
            any preceding Left-floated element.
        </p>
    </div>
</body>
</html>

清除浮动元素的两侧和无清除

以下示例说明了Tailwind CSS Clear-Both 和 Clear-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 Clear-Both
    </h2>
    <div class="bg-pink-200 
                p-2 mt-2">
        <div class="float-left bg-blue-300 p-2">
            Clear-Both
        </div>
        <p class="clear-both">
            Clear-both class moves the element below
            all preceding floated elements.
        </p>
    </div>
    
    <h2 class="font-bold text-xl">
        Tailwind CSS Clear-None
    </h2>
    <div class="bg-pink-200 p-4 mt-2">
        <div class="float-right bg-blue-300 p-1">
            Clear-Both
        </div>
        <p class="clear-none">
            Clear-None class ensures element
            doesn't Clear.
        </p>
    </div>
</body>
</html>

打印页面