1.overflow基本属性
值：visible、hidden、scroll、auto、inherit
初始值：visible
应用于：块级元素和替换元素
继承值：无
计算值：根据指定确定
overflow-x和overflow-y
当容器高宽都不足以容下图片时，overflow-x:hidden会把x方向的隐藏掉、y方向出现滚动条；为什么会出现这种情况呢？
如果overflow-x和overflow-y值相同，则等同于overflow；
如果overflow-x和overflow-y值不同，且其中一个值为visible，另一个值为hidden、scroll、auto，则visible会被重置为auto；这就是为什么上面的y方向出现滚动条；
兼容性
不同浏览器滚动条的表现不一样；
宽度设定机制，见下面一个例子：
<div class="box"><div class="content"></div></div>
.box { width: 400px; height: 100px; overflow: auto; }
.content { width: 100%; height: 200px; background-color: #beceeb; }
在IE7中，垂直和水平方向都出现了滚动条；这是宽度设定机制差异导致的，IE7浏览器把100%宽度算成了外部容器的400px，而垂直方向出现滚动条后，会占用宽度的，从而外部容器水平方向没有400px，从而水平方向出现了滚动条。
如何避免这种情况呢，直接去掉width: 100%就好了。
IE8没有这种情况；
如何使overflow属性有效
非
display： inline水平对应方位的尺寸限制；
width/height/max-width/max-height/absolute拉伸；对于单元格td等，还需要table为
table-layout：fixed状态才行；
两个IE7的bug：
(1)IE7浏览器下，按钮里的文字越多，按钮两侧的padding留白就越大！
解决方案：给所有按钮添加css样式overflow:visible
(2)
.size{ max-width: 200px; max-height: 300px; overflow: auto; }
<div class='size'><img src="mm1.jpg" width="256" height="191"></div>
按理论只有水平出现滚动条，结果垂直方向也出现了；
2.overflow与滚动条
滚动条出现的条件
1.overflow:auto/overflow:scroll //<html>、<textarea>
2.当子元素的水平或者垂直方向超过容器对应方向的最大限度；
body/html与滚动条
无论什么浏览器，默认滚动条均来自<html>而不是<body>标签；
原因：新建一个空白HTML页面，<body>默认.5em margin值，如果滚动条来自<body>，则应该滚动条与浏览器边框有边距；而事实是滚动条是紧贴着浏览器边框的；
IE7-浏览器默认类似： html { overflow-y: scroll; }
IE8+等浏览器默认：html { overflow: hidden; }
所以，如果我们想要去除页面默认滚动条，只需要：
html { overflow: hidden; }
而没必要把
也拉下水：html, body { overflow: hidden; } //不需要body标签
JS与滚动高度
chrome浏览器是：document.body.scrollTop;
其他浏览器是：document.documentElement.scrollTop;
目前，两者不会同时存在，因此，有人会写成：
var st = document.body.scrollTop + document.documentElement.scrollTop
建议使用：
var st = document.body.scrollTop || document.documentElement.scrollTop
overflow的padding-bottom缺失现象
.box { width: 400px; height: 100px; padding: 100px 0; overflow: auto; }
在chrome浏览器下面的padding-bottom可以滚动出来；而其他浏览器都不存在；
可能导致的： 不一样的scrollHeight(元素内容高度)
滚动条的宽度机制
滚动条会占用容器的可用宽度和高度；
下面这种方法可以计算滚动条的宽度：
.box {width: 400px; overflow: scroll; }
.in {*zoom: 1; /* for IE7 */}
<div class="box">
<div id="in" class="in"></div>
</div>
console.log(400 - document.getElementById("in").clientWidth);
测得的结果：IE7+/Chrome/FireFox(win7)-均是17像素；
overflow:auto的潜在布局隐患
滚动条会占用容器尺寸，原本和谐的布局，滚动条出现后可能挂掉；
水平居中跳动问题
.container { width: 1150px; margin: 0 auto; }
问题的修复：
1.html { overflow-y: scroll; } // 太丑
2..container { padding-left: calc(100vw - 100%);}
3.overflow与BFC
BFC(block formatting context) - ‘块级格式化上下面’
BFC有一个特点：页面之结界，内部元素再怎么翻云覆雨都不会影响外部；
overflow与BFC
overflow有三种属性会触发BFC：auto、scroll、hidden
有三种常用用途：
清楚浮动影响、避免margin穿透问题、两栏自适应布局