布局功能
学习如何使用 Tailwind 通过容器、浮动和清除来管理多个元素的布局。
使用 Tailwind，我们可以布局整个页面上的元素，并管理常见的功能，如导航栏、侧边栏和页脚。我们还可以使用 Tailwind 在页面内创建复杂的元素组合，例如卡片或英雄区块。
让我们从 Tailwind 提供的一些通用实用工具开始，帮助我们在页面上定位元素——盒间关系。
容器
许多 CSS 框架使用 container 类作为顶层容器，以指定页面宽度。虽然 Tailwind 也提供了 .container 实用工具，但其功能远不如其他框架中的类似类强大。.container 实用工具会根据浏览器视口的宽度来设置元素的 max-width。例如，任何宽度在 640 到 768 像素之间的视口都会被设置为 max-width 640 像素。当视口超过 768 像素时，max-width 保持在 768 像素，直到视口达到 1024 像素。当视口达到 1280 像素时，max-width 再次增加。
使用 container 的优势在于，它让我们只需关注设计中特定的宽度，而无需考虑视口可能存在的所有可能宽度。
如果你熟悉其他框架，Tailwind 的 .container 可能不会具备你所期望的功能。Tailwind 的 .container 实用工具不会自动将其子元素水平居中。要实现居中，我们需要将 container 实用工具与 mx-auto 配合使用。Tailwind 的 .container 实用工具也不会引入内边距或外边距，使元素远离浏览器边框。我们需要将容器与 .m 或 .p 实用工具结合使用才能实现此行为。因此，我们顶层元素的一个合理类列表可能是 class="container mx-auto py-12 px-6"。
> **视口** > > 在 CSS 中，视口是用户可以看到内容的浏览器区域。我们关注的是视口的宽度，因为它决定了屏幕横向滚动前可以放置多少内容。HTML 的 `meta` 标签用于控制移动设备上的视口宽度。默认情况下，移动浏览器通常假设显示宽度比实际设备更宽（通常是 980 像素），并将内容缩放以适应屏幕。我们应该使用 `content="width=device-width,initial-scale=1"` 属性，让浏览器使用设备尺寸作为视口，而不是从更宽的尺寸缩小显示。
浮动与清除
如果我们在一个遗留项目中使用 Tailwind，就需要处理浮动和清除修复。
在 CSS 中，float 属性用于定位容器内的内容。通常，float 属性用于将某个特定元素（通常是图像）定位到容器的一侧。这使得容器的其余部分完全位于另一侧，而不是让元素混合在一起。
Tailwind 提供了 .float-left 和 .float-right 用于定位，以及 .float-none 作为重置选项。
CSS 中的 clear 属性强制元素位于可能与其重叠的元素下方，无论是一侧还是两侧。（从技术上讲，它阻止其他元素浮动，效果等同于清除。）Tailwind 提供了实用工具来指定在一侧、两侧或不进行清除的行为——.clear-left、.clear-right、.clear-both 和 .clear-none。
位置与 z-index
在 CSS 中，z-index 属性是一个整数，用于确定沿“z 轴”堆叠的项目顺序，如果我们将轴向外延伸垂直于屏幕，则 z 轴即为此方向。Tailwind 提供了 .z-{index} 的模式，其中 index 可以是 0、10、20、30、40、50 或 auto。默认情况下没有负值选项，但我们可以在 配置文件 中添加。