携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第二天，点击查看活动详情
概述
overflow是对溢出内容的处理，有四个属性值:
visible，hidden，scroll,auto,
且可以分别设置overflow-x，overflow-y，
需要注意的是：当单独设置了overflow-x或者overflow-y为非visible时，另一个属性值默认为auto
1.visible（默认值）：使溢出内容展示【例1】
2.hidden：隐藏溢出内容且不出现滚动条【例2】
3.scroll：隐藏溢出容器的内容，溢出的内容可以通过滚动呈现【例3】
4.auto：(注意auto和scroll的区别)
auto只有在内容溢出后才显示滚动条，内容不溢出不显示，有点“智能”，scroll即使内容不溢出也显示滚动条。【例4】
应用场景
分享一个我在工作中遇到的用overflow-y:scroll;解决的难点: 调接口之后页面数据在y轴上溢出了,原来的静态页面是在数据的底下放了一个footer,里面有两个button,现在数据出现了滚动条,但是footer还固定在页面不滚动时出现的位置,挡住了页面数据的展示,我搞了半天,最后同事告诉我,你给盛放数据的父盒子加个overflow-y:scroll;让他在y轴上出现滚动轴,就能够让footer滚动了,呈现在页面的最底侧,不会遮住溢出的数据.
overflow:hidden的作用
overflow元素的hidden属性，总结2点作用：
1、当父元素设置了height值时，则设置overflow:hidden后，子元素超出父元素部分隐藏
2、当父元素的高度是靠子元素撑开的时候，子元素浮动时，则在父元素使用overflow: hidden可以清除浮动，使得父元素的高度依旧是靠子元素撑开。
