理解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">
 <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选项卡技术的不足：

适合应用场景：单页应用非常适合