overflow的妙用

overflow是个非常神奇的属性,表面上它只是用来处理超出部分隐藏的元素,实质上它有许多神奇的妙用!

1.overflow的基本属性

visible 超出部分可见(默认)
hidden 超出部分隐藏
scroll 出现滚动条,不管是否超出
auto 超出方向出现滚动条
inherit 继承(不常用)
注意注意: 当overflow-x,overflow-y值不相等，并且其中一个为visible，另一个为除visible之外的属性值(hidden,scroll,auto)，那么其中为visible的属性值会变为auto。

2.去除浏览器滚动条

html{
overflow:hidden;
}
这样就可以去除浏览器的滚动条,在普通浏览器上的html的overflow属性默认是auto,在ie7浏览器上的overflow的默认属性是scroll

3.清楚浮动的影响

overflow属性还可以清除浮动的影响,只要设置overflow的为auto,scroll,hidden都可以清楚浮动的影响,防止盒子塌陷的问题

4.两栏自适应布局

实现两栏自适应布局非常简单的办法就是自适应的盒子添加一个overflow:hidden就可以完美实现

D@R_0MD@A59DCS@SS0-300x195.png

利用overflow实现两栏自适应布局的又称BFC布局
如果要在两个盒子间添加间距,最好在第一个浮动的盒子上添加一个右外边距
当然了,运用overfllow属性会导致超出部分不可见.所以,还有一种终极写法
右边的盒子有种写法

.boxR{ display: table-cell; width: 2000px; }

5.overflow的隐藏属性和滚动属性失效问题

当容器内元素设置绝对定位的时候回导致,overflow的隐藏和滚动效果时失效

G_W8PMPUU5F7_641UI-300x285.png

这是因为img是相对于body定位的,body是它的包含块,body是div的父子集,所以导致overflow的效果失效
解决办法
1.给div加个relative让img相对于div绝对定位
2把img的包含块改为div的子集元素
3给div子元素设置任意transform属性(了解)

6.overflow 和 resize一起使用可以达到任意拉伸元素的效果

7text-overflow: ellipsis;overflow: hidden;一起用可以达到超出的文本用省略号表示

8锚点和overflow制作选项卡妙用

锚点定位的本质:”改变容器滚动的高度”;