Tailwind CSS - 清除浮动

Tailwind CSS - 清除浮动

Tailwind CSS 中的 clear 工具类用于控制内容围绕使用 float-* 工具类浮动的元素的环绕方式。

关于现代布局的说明

重要提示： float 和 clear 属性是 CSS 早期时代的遗留工具。对于构建现代页面和组件布局，你几乎总是应该使用 Flexbox (flex) 或 CSS Grid (grid)。这些现代工具更强大、可预测且更易于管理。

如今，float 的主要有效用例是文本围绕图像或元素环绕，就像报纸或杂志文章中那样。

清除浮动工具类

当你必须使用 float 时，clear 工具类可以帮助你管理布局流。

类	CSS 属性	描述
clear-left	clear: left;	将元素推到任何之前的左浮动元素的下方。
clear-right	clear: right;	将元素推到任何之前的右浮动元素的下方。
clear-both	clear: both;	将元素推到所有之前的两侧浮动元素的下方。
clear-none	clear: none;	默认值。元素不会被推下。
clear-start / clear-end	clear: inline-start; / clear: inline-end;	根据文本方向（LTR/RTL）清除浮动的逻辑属性。

示例：float 和 clear 的正确用法

此示例演示了 float 的预期用例：文本围绕图像环绕。浮动图像后面的段落使用 clear-both 来确保它在浮动内容 之后 从新行开始。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Clear Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-white font-serif text-slate-700">

  <div class="max-w-prose mx-auto">
    <h1 class="text-3xl font-bold text-slate-900 mb-4">A Story of Layouts</h1>

    <img src="https://placehold.co/150x200/a78bfa/ffffff" alt="A placeholder image" class="float-left mr-4 mb-2 rounded-md shadow-sm">

    <p class="leading-relaxed">
      This text gracefully wraps around the image because the image has the `float-left` utility. This is the primary modern use case for the float property. The margin utilities `mr-4` and `mb-2` create some breathing room between the image and the surrounding text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
    </p>

    <p class="clear-both pt-4 text-sm text-slate-500">
      This paragraph uses `clear-both`. Notice how it does not wrap and instead starts on a fresh line below the floated image and the text beside it. The `pt-4` adds some top padding for spacing.
    </p>
  </div>

</body>
</html>

现代替代方案：使用 Flexbox

对于几乎所有其他基于列的布局，Flexbox 更优越。下面是如何在不使用浮动的情况下创建简单的两列布局。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Layout with Flexbox</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-slate-50">

  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold text-slate-800 mb-4">Two-Column Layout with Flexbox</h2>

    <div class="flex flex-col md:flex-row gap-6 bg-white p-6 rounded-lg shadow">
      <div class="md:w-1/3 bg-indigo-100 p-4 rounded">
        <h3 class="font-bold text-indigo-800">Sidebar</h3>
        <p class="text-indigo-700 text-sm">This is the first column.</p>
      </div>
      <div class="md:w-2/3 bg-sky-100 p-4 rounded">
        <h3 class="font-bold text-sky-800">Main Content</h3>
        <p class="text-sky-700 text-sm">This is the second column. Using Flexbox (`flex`, `md:flex-row`, `gap-6`) is more robust and predictable than floats for this kind of layout.</p>
      </div>
    </div>
  </div>

</body>
</html>