Overflow基本属性
- visible(默认)
- hidden
- scroll
- auto
- inherit
假如overflow-x和overflow-y值相同，则等同于overflow；
假如overflow-x和overflow-y值不同，其中一个值，如overflow-x设置为hidden/scroll/auto中的一个，那么overflow-y的值是visible或没有设置时，会重置为auto。
overflow 起作用的前提条件
-
display不是inline; - 对应方位的尺寸限制。
width/height/max-width/max-height或absolute拉伸; - 对于单元格
td等，还需要table为table-layout:fixed状态;
Oveflow 与滚动条
无论什么浏览器，默认滚动条都来自于<html>元素，而非<body>。所以要想去除页面的滚动条只需要html { overflow: hidden; }。
获取滚动高度
- chrome浏览器：
document.body.scrollTop; - 其它浏览器：
docuent.documentElement.scrollTop;
所以推荐使用：
let st = document.body.scrollTop || document.documentElement.scrollTop;
滚动条会占用容器的可用宽度或高度。overflow:auto在固定宽高的的布局中，出现滚动条，破坏原本和谐的布局，应用在自适应布局中。
水平居中跳动问题
.container { width: 1150px; margin: 0 auto; }设置水平居中，当页面出现滚动条时，出现页面偏移现象，如下图：
水平居中跳动问题修复
-
html { overflow-y: scroll; }滚动条一直存在影响美观； -
.container { padding-left:calc(100vw-100%);}即 浏览器宽度 - 可用内容宽度；
Overflow 与块状格式上下文(BFC)
当overflow的值为auto/scroll/hidden时，可以触发BFC。常见应用如下：
- 清除浮动影响；
更广泛的清除浮动影响使用伪元素：
.clearfix:after{ content: ''; display: table; clear: both;}
- 避免
margin穿透问题； - 两栏自适应布局；
BFC由于自身特性，具体表现不一：
-
overflow：hidden自适应，但“溢出不可见”限制应用场景; -
float+float：包裹性+破坏性，无法自适应，块状浮动布局; -
position：absolute脱离文档流，自娱自乐; -
display：inline-block包裹性，无法自适应; -
display：table-cell包裹性，但天生无溢出特性，绝对宽度也能自适应;
广为流传的两栏自适应布局如下：
.cell { /*IE8+ BFC特性*/
display: table-cell;
width:2000px; /*设置超过外部容器宽度的数值*/
Overflow 与 absolute 绝对定位
绝对定位元素不总是被父级 overflow 属性剪裁，尤其当 overflow 在绝对定位元素及其包含块之间的时候。即 overflow 在绝对定位元素及其包含块之间时失效。
包含块指：含
position:relative/absolute/fixed声明的父级元素，没有则指 body 元素。
避免 overflow 失效：
- overflow 元素自身为包含块，即添加属性
position:relative/absolute/fixed； - overflow 元素的子元素为包含块，即添加一层 div 作为 overflow 的子元素、绝对定位的父元素，并设置属性
position:relative/absolute/fixed； - 任意合法 transform 声明当做包含块，考虑兼容性，overflow 自身设置 transform 或其子元素设置 transform；
overflow 失效的妙用
依赖 Overflow 的样式表现
resize 拉伸
-
resize: both水平垂直两边拉伸； -
resize: horizontal水平方向拉伸； -
resize: vertical垂直方向拉伸；
但，resize 要想起作用，元素的 overflow属性不能为 visible！
文本域天生具有resize特性，因为默认
overflow：auto
text-overflow: ellipsis 文字溢出省略
Overflow 与锚点技术
锚点定位的本质是改变容器的滚动高度。其生效的条件有：
- 容器可滚动——overflow 不是 visible,里面元素高于容器；
-
锚点元素在容器内；
锚点定位的触发
- url地址中的锚链与锚点元素；
- 可 focus 的锚点元素处于 focus 状态；
锚点定位的作用
- 快速定位
- 与 overflow 结合的选项卡技术
但这种技术有明显的不足，由于锚点定位一直定位到最外层的滚动条，所以点击锚点后，会使页面滚动到屏幕最顶端，影响体验；但应用在单页应用，没有滚动条的页面效果不错。
