overflow

一、overflow基本属性

（1）visible默认 超出部分表现出来

（2）hidden 超出部分隐藏

（3）scroll 滚动条

（4）auto  哪侧溢出 那边出现滚动条

（5）inherit

二、作用的前提

（1）非display:inline

（2）对应方位的尺寸限制 width/height/max-width/max-height/absolute拉伸

三、overflow:visible妙用

IE7浏览器下，文字越多，按钮两侧的padding留白就越大，解决方法：

给所有按钮增加overflow:visible

四、overflow 与滚动条

滚动条出现的条件：overflow:auto/scroll

无论是什么浏览器，默认滚动条均来自html标签，而非body标签

IE7-：html{ overflow-y:scroll}（类似，overflow在IE8+才出现）

IE8+: html{overflow:auto}

故要去除页面默认的滚动条，只需要

html{ overflow:hidden}即可

js与滚动高度的计算：

chrome:document.body.scrollTop

others:document.documentElement.scrollTop

故较好的兼容语句：

var a = document.body.scrollTop || document.documentElement.scrollTop

五、overflow的padding-bottom确实现象

除了chrome浏览器外，其他所有浏览器的padding-bottom缺失，造成scrollHeight不同

六、overflow与块状格式上下文

BFC：Block formatting content  ---块级格式化上下文

造成的页面结果是：内部元素再怎么翻云覆雨都不会影响外部，overflow可以触发BFC，但是并不是所有的属性都可以的，其中auto scroll hidden都行，而visible不可以，有如下三种应用

清除浮动影响

避免margin重叠问题

两栏自适应布局

but...

最好的清除浮动的一种写法是：

.clearfix{*zoom:1}

.clearfix:after{content:'';display:table;clear:both;}IE8+

七、over与sbsolute绝对定位

absolute可以不受overflow:hidden/auto的限制

八、锚点触发

有如下情况可以触发锚点

（1）url地址中锚链与锚点元素

（2）可focus的锚点元素处于focus状态

锚点定位的本质是改变容器的滚动高度