溢出：隐藏除了隐藏滚动之外还有什么？

Question

溢出：隐藏除了隐藏滚动之外还有什么？我只是通过添加overflow:hidden的意外修复了一个问题。我认为这只会让滚动看不见。它还有什么作用？我找不到任何好的解释。

Answer 1

overflow属性未设置为visible creates a new block formatting context：

  

浮动，绝对定位的元素，阻止不是块框的容器（例如内联块，表格单元格和表格标题），以及除“可见”以外的“溢出”的块框（除非该值已传播到视口）为其内容建立新的块格式化上下文。

Answer 2

在外行人的术语中，它隐藏了被剪切的部分（延伸到具有其可见性集的div的矩形之外的部分），以便div的内容超出父矩形的边界，是不可见的（并且不可滚动）到）。

相反visible即使它们比父级更宽/更高，也会呈现这些部分，而auto会隐藏它们，但允许通过滚动条访问它们。

因此，如果您的父div为100px x 100px，并且您开始将内容放入该div中，那么当内容超出100px边界时，这些部分就会停止显示。即使可见性设置为隐藏，也可以使用javascript强制滚动到它们，具体取决于浏览器。

Answer 3

  

溢出CSS属性指定是否剪辑内容，渲染滚动条或显示块级元素的溢出内容。

docs