overflow在css中的作用

哈，你的问题很具体。
溢出在CSS中其实非常重要。
它就像一个看门人，监视网页元素以确保它们不会跨越边界。
让我详细介绍一些常见的用法。

首先，您应该知道溢出有几个值：visible、hide、scroll、auto、initial 和 Inherit。
该值决定了当内容超出容器边界时浏览器将执行的操作。


Visible 是默认值，这意味着即使内容超出容器的边界，无论其长度如何，内容都将是可见的。
这会导致内容覆盖其他元素，有时会使其看起来很混乱。

隐藏是指隐藏多余的内容并仅显示容器内的内容。
这样，用户将无法看到被截断的部分。

滚动是指给容器添加滚动条，不管内容是否超出限制。
这样用户就可以通过滚动条看到所有内容。

auto 值更聪明一些。
根据内容是否溢出来决定是否显示滚动条。

initial 将溢出属性重置为正常显示的浏览器的默认值。

inherit允许元素继承其父元素的overflow属性的值。

Overflow 还有两个弟弟，Overflow-x 和 Overflow-y。
这两个专门控制水平和垂直方向的溢出行为。
通过允许单独处理水平和垂直溢出，这使得布局更加优雅。

例如，如果你想要一个简单的页面布局，并且不希望内容溢出，你可以使用 Overflow:hidden;这样，容器外面的内容物就被切断了。
如果您希望用户看到所有内容，但又不想让内容影响布局，请使用 Overflow: auto;这将根据内容自动添加滚动条。

简而言之，overflow是一个强大的CSS属性。
如果使用得当，它可以使您的网页布局美观实用。
但是，在使用滚动条时，必须注意不要过度使用它们。
否则，用户可能会感到不舒服。
无论如何，这取决于你，如果你用得好，那就是奖励。
我还在想这个问题。
如何更好的利用溢出来提升用户体验？

css属性overflow处理内容溢出方法

说实话，overflow 使用起来非常简单，但是仔细想想就会很混乱。
最让我印象深刻的是，当我刚开始进入这个行业时，当我创建一个活动页面时，我无法填充太多用户的评论，所以我最终将其隐藏了。
结果下面的评论区就被折叠成了我没穿裤子的样子。
然后我意识到我忘记添加overflow:hidden到父容器来关闭它。

有趣的是，当您使用 auto 时，浏览器自动定向的能力就像您的后脑勺长了眼睛一样。
我之前重新启动了一个新闻网站，并在长篇内容领域使用了自动化。
用户反映，“啊？为什么我突然看到一个额外的垂直滚动条？”我查了半天代码，记得是因为图片的延迟加载没有完成，DOM的实际高度没有超过容器。
当时，我不明白为什么移动设备上的手势滚动比桌面设备上更智能。
后来我查了资料，发现这是标准的默认行为，但却节省了我很多调试时间。

我已经多次使用过消失浮动的技巧。
之前在做一个电商详情页的时候，给图片添加阴影后，父容器的高度突然变成了负数，导致整个页面下降。
当我改成overflow:hidden时，影子就消失得无影无踪了。
客户还询问为什么推荐文字的背景颜色突然消失了。
我没有亲自运行过这个，但我记得的数据来自 2 01 8 年左右的版本。
浏览器对溢出、或隐藏模型和盒模型错误有更标准化的处理。

最近在表单中使用的单独方向控件。
我们有一个后台管理系统。
导出数据会生成一个很长的表。
如果固定标题，它将垂直滚动。
不过价格栏太宽了，直接溢出了。
这就是overflow-x:auto 派上用场的地方。
用户可以拖放来查看具体金额，这比全屏滚动舒服得多。
然而，陷阱之一是 Firefox 对非阻塞级别元素（例如表格标题中的按钮）的overflow-x 处理有点奇怪，需要添加一些技巧，例如 display: table-cell。

目前，在选择值时，我们习惯对固定区域（如聊天框）使用scroll，对文章内容使用auto，对需要隐藏的内容（如导航栏中的溢出菜单）使用hide。
一个案例是知识付费平台上的课程展示。
水平滚动+垂直滚动，overflow-x:滚动；侧边栏文章列表，overflow-y：auto -说实话，这个组合非常好用，但有客户抱怨在移动设备上用两根手指缩放时滚动条飞起来。
当时我不明白为什么，但后来我意识到iOS在转换操作后的溢出重定位过于激进。

我记得的数据是，目前9 5 %的Web开发者都使用溢出，但我从来没有统计过具体的值。
无论如何，这些都是核心价值观。
按键因场景而异。
例如，全屏视频播放当然是可见的，但对于长列表内容区域，选择“自动”几乎是微不足道的。
不过，也有例外。
在进行无限滚动加载时，有意使用hidden来阻止溢出内容并使用JavaScript来动态加载数据。
这种狡猾的操作如果用得太多很容易陷入陷阱，比如忘记给父容器添加溢出。

css元素overflow属性溢出处理技巧

说实话，如果overflow用得好，确实可以让页面看起来更顺眼。
刚开始学的时候，我都是用overflow:hidden当药。
结果，很多正常的内容被破坏了，我花了一段时间才把它改回来。

有趣，overflow: auto特别有用。
记得有一次做后端管理系统的时候，有一个固定高度的日志输出框。
一旦内容过多，就溢出来，变得一团糟。
更改override:auto后，自动显示滚动条，用户可以直接拖动查看。
这种体验比强行定长盒子要好很多。
但是，请注意，这个滚动条有时会​​很烦人。
例如，在移动设备上，没有内容时会出现意外栏，影响观感。

说到 BFC，这是最令人惊奇的溢出应用程序之一。
之前做两列布局时，左列是固定宽度且浮动的，右列是自适应的。
结果，父容器的高度大幅塌陷。
当时我就一头雾水，后来查了资料，发现加上overflow:hidden就可以解决问题。
这个原理其实很有趣。
Overflow:hidden会引起BFC，相当于“唤醒”父容器：“哦，你需要包括我儿子（浮动元素）的高度！”我现在很容易使用这个技巧，特别是与清理（注意清理）修复结合使用时。

在留下文字方面我遇到了麻烦。
刚开始做产品listing的时候，标题太长，直接就出现了。
因此，我无法在屏幕上显示多行内容，并且用户很难阅读产品名称。
后来改用了whitespace:nowrap+overflow:hidden+text-overflow:ellipsis，感觉瞬间清爽了。
但请注意，这与 IE6 -7 不兼容。
在为旧客户制作项目时，您应该准备一个切换按钮来显示所有文本。

删除多行文本实际上更复杂。
我有一个H5 电子商务网站。
我使用 -webkit-line-clamp 删除了三行。
我发现不同的浏览器翻译不同。
后来我意识到需要配合display:-webkit-box和-webkit-box-orient:vertical。
我花了很长时间才修复它才稳定下来。
我个人还没有对此进行移动性能测试。
我记得的数据是-webkit-line-clamp：大约3 个作品，但建议使用浏览器开发者工具进行更多测试。

在移动场景中，存在很多溢出：隐藏操作。
例如，当出现弹窗时，如果不添加overflow:hidden，后台页面就会相应滚动，导致用户体验非常差。
我有一个项目，用户报告“当我单击按钮时，整个页面都会震动”。
检查后发现弹窗中并没有添加overflow:hidden。
更改后，用户感觉很舒服。

说白了，溢出就是控制屏幕的边框。
如果你运用得好，可以为你省去很多麻烦。
但记住，每一个trick都有适用场景，不要套用只是机械地。
例如，虽然overflow:motion受到严格控制，但它会让页面显得臃肿；虽然overflow:hidden很简单，但是如果使用频繁的话很容易丢失重要的内容。
必须根据具体情况权衡利弊。