1. overflow-x与overflow-y
如果两值不同，其中一值为visible，另一值为 hidden、scroll、auto，则visible被重置为auto，自动重置。所以给一个宽高都大于容器的内容div设置overflow-x:hidden; 会使得其x方向隐藏，y方向出现滚动条。
2. 滚动条一般17px。
3. 如果设置内容器宽度为100%，可能出现滚动条，如果想自适应，最好不要加width属性。
4. 默认滚动条来自HTML元素。
5. 获取滚动高度
var st=document.documentElement.scrollTop||document.body.scrollTop;
6. overflow会有padding-bottom缺失现象，会导致滚动高度不同。
7. 滚动条宽度
占用容器宽度，容器宽度- 子元素.clientWidth=滚动条宽度
8. 如果使用overflow:auto ，可能出现水平居中container因为滚动条的出现而跳动。解决方案如下：
（1） html{
overflow-y:scroll;
}
(2) .container{
padding-left: calc(100vw-100%);
}
其中 100vw 指浏览器宽度，100%指可用内容宽度
9. 可以触发BFC（块级格式化上下文）的overflow值：auto、hidden、scroll。
10. 特性
（1） 内部浮动无影响（除visible）
(2)避免margin穿透问题（除visible）
（3）实现两栏自适应布局
这样实现两栏自适应布局好处：浮动元素的兄弟元素clear:both;不受影响
上图中，给蓝色div设置clear:both 狗狗图片不会向下移动，因为蓝色div overflow
:hidden 以后BFC化，不受外部浮动元素影响。这样实现的两栏自适应布局更加健壮。
都不好，推荐在浮动元素上写两元素间距
11. overflow失效
当overflow元素在绝对定位元素与其有定位的父元素或者body之间时，overflow属性失效。
如何避免overflow元素失效：（1）overflow元素自己作为有定位的那个父级元素；（2）overflow的子元素作为有定位的父级元素（3）任意合法transform声明作为有定位的父级元素。
12. overflow与其他属性配合使用
13. overflow选项卡技术
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>test absolute 流体布局</title>
<style>
.rightphoto{
float:left;
}
.leftdiv{
background-color: #DDD;
/*padding-left: 200px;*/
overflow: hidden;
}
.leftphoto{
line-height: 22px;
padding-bottom: 6px;
font-size: 14px;
}
.leftp{
clear:both;
}
</style>
</head>
<body>
<a href="#" target="_blank" rel="external nofollow" class="rightphoto"><img src="P_00.jpg" alt="hello"/></a>
<div class="leftdiv">
<p class="leftp">12月25日为本月最后一个周五，按照惯例，图书馆将进行内部学习。12月25日（周五）下午闭馆，晚上5点照常开放，望广大师生读者周知。</p>
<img src="P_01.jpg" class="leftphoto" alt="hi"/>
</div>
</body>
</html>
![CSS的伪元素和伪类的区别[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)