CSS深入理解之overflow

1. overflow 起作用的前提

Tips: 如果 overflow-x，overflow-y 相同，则等同于 overflow；如果不同，其中一个为 visible，另外一个为 auto / hidden / scroll，则 visible 会重置为 auto

无论什么浏览器，默认滚动条均来自 <html>，而不是 <body> 标签.所以，如果想要去除页面默认滚动条，只需要 html{ overflow: hidden }，而没必要把 <body> 也拉下水。

Chrome 浏览器: document.body.scrollTop
其他浏览器: document.documentElement.scrollTop

目前，两者不会同时存在，建议使用:

1	var st = document.body.scrollTop \|\| document.documentElement.scrollTop

由于滚动条会使网页可用内容宽度变小，所以水平居中的页面出现滚动条时会有跳动的问题，解决方案：

1	-webkit-overflow-scrolling:touch;

会使滚动出现缓冲效果

.cell{
  display: table-cell;
  width: 2000px; // IE8+ BFC特性
  display: inline-block;
  width: auto; // IE7- 伪BFC特性
}

只适用于 block 属性的元素，之间的空隙推荐使用浮动元素的 margin 来实现

overflow: hidden 在子元素绝对定位失效，可以理解成，父元素与子元素所在的层级不一样了，子元素完全脱离文档流了，因而无法被剪裁。而给父元素加上除 static 以外的定位属性（使之成为包含块），只不过是提高了父元素的层级，从而约束绝对定位的表现。使之可以被溢出隐藏

动态渲染异常: Chrome 包含块重定位 / Opera 同，但点击重绘自修正 / Safari 非定位 overflow 元素左上角

右侧图片会紧挨左侧内容，并实现自适应跟随，&nbsp 可以辅助将图片设置在右方；将 &nbsp 的高度设置为 0 以及 overflow: hidden 可以让 &nbsp 不影响布局，但图片是绝对定位，不会受 overflow: hidden 影响：

可以拉伸元素尺寸，但是，此声明要想起作用，元素的 overflow 属性值不能是 visible

文本溢出时用 … 代替，经常与 white-space: nowrap 一起使用，但是，不设置 overflow: hidden 属性，无法实现效果

寻找妹子5: <a href="#mm5">