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>

列印頁面