目录
- 1.Overflow基本属性
- 可能的值
- 2.Overflow与滚动条
- body/html与滚动条：
- body/html与滚动条：JS与滚动高度
- 滚动条的宽度机制
- overflow:auto的潜在布局隐患：
- 水平居中跳动问题的修复
- 3.Overflow与块状格式上下文
- 4.Overflow与absolute绝对定位
1.Overflow基本属性
可能的值
值 | 描述 |
visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
hidden | 内容会被修剪，并且其余内容是不可见的。 |
scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
overflow-x和overflow-y（IE8+）
overflow-x 水平方向
属性 | 表现 |
overflow-x：hidden | x方向被隐藏，y方向出现了滚动条 |
overflow-y:hidden |
如果overflow-x和overflow-y值相同，则等同于overflow；
如果overflow-x和overflow-y值不同，且其中一个属性值被赋予visible，而另外一个属性值被赋予hidden，scroll或者auto，visible会被重置为auto;
如何让overflow起作用的前提：
1.非display:inline水平
2.对应方位的尺寸限制。width/height/max-width/max-height/absolute拉伸
3.对于单元格td等，还需要table为table-layout:fixed状态才行
2.Overflow与滚动条
滚动条出现的条件
1.overflow:auto/overflow:scroll-html/textarea
2.超过宽度和长度
body/html与滚动条：
无论什么浏览器，默认滚动条均来自!而不是标签。
IE7-浏览器默认：html {overflow-y:scroll}
IE8+等浏览器默认：html {overflow:auto }
所以，如果我们想要去除页面默认滚动条，只需要：
html {overflow:hidden}
而 没必要把也拉下水：
html,body {overflow:hidden}
body/html与滚动条：JS与滚动高度
Chrome浏览器是：document.body.scrollTop;
其他浏览器是：document.documentElement.scrollTop;
目前，2者不会同时存在，因此，坊间流行这类写法：
var st=document.body.scrollTop+document.documentElement.scrollTop;
不建议采用上面的写法，建议使用：
var st=document.body.scrollTop || document.documentElement.scrollTop;
滚动条的宽度机制
一句话：滚动条会占用容器的可用宽度或高度。
IE7+/Chrome/FireFox(win7)---均是17px
overflow:auto的潜在布局隐患：
滚动条会占用容器尺寸，原本和谐的布局，滚动条出现后可能挂掉
水平居中跳动问题的修复
1.html {overflow-y:scroll}
2..container {padding-left:calc(100vw-100%);}
100vw--浏览器宽度；100%--可用内容宽度
3.Overflow与块状格式上下文
---清除浮动，自适应布局
BFC:（block formatting context)--"块级格式化上下文"
页面之结界，内部元素再怎么翻云覆雨都不会影响外部
overflow与BFC
值 | 描述 |
visible | 默认值。内容不会被修剪，会呈现在元素框之外。，不支持 |
hidden | 内容会被修剪，并且其余内容是不可见的。支持 |
scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。支持 |
auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。支持 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
1.清除浮动影响
2.避免margin穿透问题
3.两栏自适应布局
左浮动，右overflow
4.Overflow与absolute绝对定位
隐藏失效与滚动固定
遇到内部元素absolute定位时，overflow:hidden失效，overflow滚动失效
失效原因：绝对定位元素不总是被父级overflow属性剪裁，尤其当overflow在绝对定位元素及其包含块之间的时候。
包含块指：含position:relvative/absolute/fixed声明的父级元素，没有则body元素
如何避免失效：
1.overflow元素自身为包含块
2.overflow元素的子元素为包含块
3.任何合法transform声明当做包含块
5.resize
resize声明要想起作用，元素的overflow属性值不能是visible
