理解overflow

overflow 基本属性值

• visible(默认）
• hidden
• scroll 纵向横向都会出现滚动条
• auto 图片尺寸溢出 会自动出现滚动条
• inherit IE8以上才支持 会有很多兼容性问题
  overflow-x:hidden 水平方向隐藏，但竖直方向可能·会出现滚动条
  overflow-y:hidden 与上面相反

如果overflow-x 与 overflow-y值相同等同于overflow，如果overflow-x与overflow-y值不同，且其中一个值为visible,另外一个被赋予 hidden scroll auto,则visible会被重置为auto。

兼容性以及作用前提

• 非display：inline
• 不用浏览器下，滚动条样式不同
• 宽度设定机制
  ie下的bug: 宽度不够时不仅出现了水平滚动条，还出现了垂直滚动条
  对于单元格td设置尺寸或overflow:hidden不起作用,还需要table为table-layout:fixed状态才行

overflow:visible妙用

IE7浏览下，文字越多，按钮padding留白就越大！
但给所有按钮添加overflow:visible后的ie7浏览器就能正常显示了
而同样在IE8下正常

滚动条出现的条件

1.overflow:auto/overflow:scroll
2./自带滚动条效果
3.无论什么浏览器，默认滚动条均来自!而不是标签
原因：新建一个空白HTML页面，默认.5em margin 值，如果滚动条来自,则应该有边距，而不是靠着边缘的

body/html与滚动条

• IE7浏览器默认： html{overflow-y:scroll;}
• IE8+等浏览器默认：html{overflow:auto;}
  所以，如果我们想要去除页面默认滚动条，只需要：
  html{overflow:hidden;}
  没有必要把也拉下水
  滚动失效
  绝对定位元素不总是被父overflow属性裁剪，尤其当overflow在绝对定位元素及其包含块（含position:relative/absolute/fixed声明的父级元素，没有则body元素）之间的时候。
  eg:

body(包含块）    div.overflow-hidden        img(absolute)

上面的例子overflow元素正好在绝对定位和包含块之间，所以失效了

overflow与BFC

BFC（block formatting context)-“块级格式化上下文“。
BFC是页面之结界，内部元素如何翻云覆雨都不会影响外部。
overflow可以触发BFC,auto,scroll,hidden都可以，但visible不能触发
有以下三种常见的应用：（IE7+支持）（以下visible都做不到）
1.清除浮动影响
方法一（副作用明显）不常用：
.clearfix{overflow:hidden; _zoom:1;}(考虑了IE6),
常用方法二：
.clearfix{*zoom:1;}//ie7,6
.clearfix:after{content:”;display:table;clear:both}//ie8以上

2.避免margin穿透问题
* overflow:hidden;
* 边框
* padding
* margin自身元素BFC化
3.两栏自适应布局

如何避免失效？

1.overflow元素自身为包含块；

为overflow元素自身添加style=”position:relative;”;

2.overflow元素的子元素为包含块；
为overflow元素子元素添加style=”position:relative;”;

3.任意合法transform声明当作包含块
* 让overflow元素自身transform:
ie9+/FireFox √
Chrom/safari(win)/opera ×
* overflow子元素transform:
* ie9+/FireFox √
Chrom/safari(win)/opera √

overflow失效妙用

与absolute跟随特性结合，实现自适应

.h0{height:0;}.ovh{cverflow:hiden;}.tr{text-align:right;}.abs{position:absolute;}

<div class="h0 ovh tr">    &nbsp;<img src="fixed-right.png" class="abs ml10 mt30"></div>

resize拉伸

css3有个属性名为resize,可以拉伸元素尺寸：
* resize:both 水平垂直两边拉
* resize:horizontal 只有水平方向拉；
* resize:vertical 只有垂直方向拉

但是,此声明要想起作用，元素的overflow属性值不能是visible
举例来说：文本域天生：overflow:auto
所以天生外挂resize特性
### resize拖拽区域大小
###text-overflow:ellipsis 文字溢出点点点省略，必须依赖overflow:hidden属性，否则无法实现效果
### overflow锚点技术
利用锚点定位与overflow选项卡技术的不足：
适合应用场景：单页应用非常适合