Tailwind CSS - Clear

Tailwind CSS Clear 是一个实用类，用于控制浮动元素周围的元素流向。它用于控制内容在元素周围的环绕。

Tailwind CSS Clear 类

以下是 Tailwind CSS Clear 类的列表，它们提供了一种有效的方法来对齐元素周围的内容。

Tailwind CSS Clear 类的功能

• Clear-start:此类取代 CSS Clear: inline-start; 属性。它会根据文本的方向清除 inline-start 一侧的元素。
• Clear-end:此类取代 CSS Clear: inline-end; 属性。它会根据文本的方向清除 inline-end 一侧的元素。
• Clear-right:此类取代 CSS Clear: right; 属性。它会将元素移动到任何先前的右浮动元素下方。
• Clear-left:此类取代 CSS Clear: left; 属性。它会将元素移动到任何先前的左浮动元素下方。
• Clear-both:此类替换 CSS Clear: both; 属性。它将元素移动到所有其前的浮动元素下方。
• Clear-none:此类替换 CSS Clear: none; 属性，确保元素不会被清除。

Tailwind CSS Clear 类示例

以下示例将说明 Tailwind CSS Clear 类的实用功能。

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

以下示例说明了 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>

浮动元素的 Clear-Both 和 Clear-None

以下示例演示了 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>