内容溢出
溢出是指当内容过多而无法容纳在元素框中时发生的情况。在本指南中，您将了解什么是溢出以及如何管理它。
什么是溢出？
CSS 中的一切都是一个盒子。可以通过分配width和height（或inline-size和block-size）的值来约束这些盒子的尺寸。当内容过多无法容纳在盒子中时，就会发生溢出。CSS 提供了各种工具来管理溢出。随着你进一步学习CSS布局和编写CSS，你会遇到更多溢出情况。
CSS 尝试避免“数据丢失”
让我们考虑两个示例，它们演示了CSS在发生溢出时的默认行为。
第一个示例是一个通过设置height来限制大小的盒子。然后我们添加超出分配空间的内容。内容溢出盒子并落入下面的段落。
第二个示例是一个盒子中的一个单词。盒子的尺寸过小，无法容纳单词，因此单词溢出了盒子。
你可能想知道为什么CSS以如此混乱的方式工作，将内容显示在预期的容器之外。为什么不隐藏溢出的内容？为什么不调整容器的大小以适应所有内容？
只要有可能，CSS 不会隐藏内容。这会导致数据丢失。数据丢失的问题在于你可能不会注意到。网站访问者也可能不会注意到。如果表单上的提交按钮消失了，没有人能够完成表单，这可能是一个大问题！相反，CSS 以可见的方式溢出。你更有可能看到存在问题。在最坏的情况下，网站访问者会通知你内容重叠。
如果你使用width或height来限制盒子，CSS 会相信你知道你在做什么。CSS 假设你在管理潜在的溢出。通常，当盒子包含文本时，限制块维度是有问题的。在设计网站时，文本可能比你预期的多，或者文本可能更大（例如，如果用户增加了字体大小）。
接下来的两节课将解释控制大小的不同方法，这些方法不太容易发生溢出。但是，如果你需要固定大小，你也可以控制溢出的行为。让我们继续阅读！
overflow 属性
overflow 属性可以帮助你管理元素的内容溢出。使用此属性，你可以向浏览器传达它应该如何处理溢出的内容。<overflow> 值类型的默认值为visible。使用此默认设置，当内容溢出时，可以查看内容。
如果内容溢出时要裁剪内容，可以设置overflow: hidden。这正是它的字面意思：隐藏溢出。注意，这可能会使某些内容不可见。只有在隐藏内容不会导致问题时才应这样做。
或者，你可能希望在内容溢出时添加滚动条？使用overflow: scroll，具有可见滚动条的浏览器将始终显示它们，即使没有足够的内容溢出。这提供了保持布局一致的优势，而不是滚动条根据容器中的内容量出现或消失。
从下面的框中删除一些内容。注意，即使不需要滚动，滚动条也会保留。
注意：滚动条的可见性取决于操作系统。你可能需要更改浏览器设置以始终显示滚动条，以便在以下示例中始终显示滚动条。
在上面的示例中，我们只需要在y轴上滚动，但是我们在两个轴上都获得了滚动条。要只在y轴上滚动，可以使用overflow-y 属性，并将overflow-y设置为scroll。
你还可以使用overflow-x启用沿x轴的滚动，尽管这不是容纳长单词的推荐方法！如果在一个小盒子里有一个长单词，请考虑使用word-break或overflow-wrap属性。此外，在CSS 中调整项目大小中讨论的一些方法可能有助于你创建能够更好地适应不同内容量的盒子。
与scroll一样，无论是否有足够的内容导致滚动条，你都会在滚动维度中获得一个滚动条。
注意：可以使用overflow属性传递两个值来指定x轴和y轴滚动。如果指定了两个关键字，则第一个应用于overflow-x，第二个应用于overflow-y。否则，overflow-x和overflow-y都设置为相同的值。例如，overflow: scroll hidden会将overflow-x设置为scroll，将overflow-y设置为hidden。
如果只想在内容超出盒子容量时显示滚动条，请使用overflow: auto。这允许浏览器确定是否应该显示滚动条。
在下面的示例中，删除内容，直到它适合盒子。你应该看到滚动条消失。
Overflow 建立块级格式化上下文
当你使用<overflow>值scroll和auto时，会创建一个块级格式化上下文 (BFC)。这意味着具有这些overflow值的元素盒的内容会获得一个自包含的布局。此元素盒外部的内容无法侵入元素盒，并且元素盒中的任何内容都无法侵入周围的布局。这使得滚动行为成为可能，因为所有盒子内容都需要包含在内，并且不能重叠才能创建一致的滚动体验。
Web 设计中不需要的溢出
现代布局方法（在CSS 布局中描述）管理溢出。它们在很大程度上无需假设或依赖网页上的内容数量。
这并非一贯如此。过去，一些网站使用固定高度的容器来对齐盒子底部。否则，这些盒子之间可能没有任何关系。这是脆弱的。如果你在旧版应用程序中遇到一个盒子，其中内容覆盖页面上的其他内容，你现在就会认识到这是由于溢出造成的。理想情况下，你将重构布局，使其不依赖于固定高度的容器。
在开发网站时，始终牢记溢出。使用大量和少量内容测试设计。至少增加和减少两次字体大小。确保你的CSS健壮。更改溢出值以隐藏内容或添加滚动条仅保留用于少数几个特定用例（例如，你打算使用滚动框的地方）。
测试你的技能！
你已经到达了本文的结尾，但你能记住最重要的信息吗？在继续之前，你可以找到一些进一步的测试来验证你是否保留了这些信息——请参阅测试你的技能：溢出。
总结
本课介绍了溢出的概念。你应该理解，默认的CSS避免使溢出的内容不可见。你已经发现你可以管理潜在的溢出，并且还应该测试工作以确保它不会意外地导致有问题的溢出。
在下一篇文章中，我们将看看CSS中最常见的值和单位。