Overflow基本屬性
- visible(默認)
- hidden
- scroll
- auto
- inherit
假如overflow-x和overflow-y值相同，則等同于overflow；
假如overflow-x和overflow-y值不同，其中一個值，如overflow-x設置為hidden/scroll/auto中的一個，那么overflow-y的值是visible或沒有設置時，會重置為auto。
overflow 起作用的前提條件
-
display不是inline; - 對應方位的尺寸限制。
width/height/max-width/max-height或absolute拉伸; - 對于單元格
td等，還需要table為table-layout:fixed狀態;
Oveflow 與滾動條
無論什么瀏覽器，默認滾動條都來自于<html>元素，而非<body>。所以要想去除頁面的滾動條只需要html { overflow: hidden; }。
獲取滾動高度
- chrome瀏覽器：
document.body.scrollTop; - 其它瀏覽器：
docuent.documentElement.scrollTop;
所以推薦使用：
let st = document.body.scrollTop || document.documentElement.scrollTop;
滾動條會占用容器的可用寬度或高度。overflow:auto在固定寬高的的布局中，出現滾動條，破壞原本和諧的布局，應用在自適應布局中。
水平居中跳動問題
.container { width: 1150px; margin: 0 auto; }設置水平居中，當頁面出現滾動條時，出現頁面偏移現象，如下圖：
水平居中跳動問題修復
-
html { overflow-y: scroll; }滾動條一直存在影響美觀； -
.container { padding-left:calc(100vw-100%);}即 瀏覽器寬度 - 可用內容寬度；
Overflow 與塊狀格式上下文(BFC)
當overflow的值為auto/scroll/hidden時，可以觸發BFC。常見應用如下：
- 清除浮動影響；
更廣泛的清除浮動影響使用偽元素：
.clearfix:after{ content: ''; display: table; clear: both;}
- 避免
margin穿透問題； - 兩欄自適應布局；
BFC由于自身特性，具體表現不一：
-
overflow：hidden自適應，但“溢出不可見”限制應用場景; -
float+float：包裹性+破壞性，無法自適應，塊狀浮動布局; -
position：absolute脫離文檔流，自娛自樂; -
display：inline-block包裹性，無法自適應; -
display：table-cell包裹性，但天生無溢出特性，絕對寬度也能自適應;
廣為流傳的兩欄自適應布局如下：
.cell { /*IE8+ BFC特性*/
display: table-cell;
width:2000px; /*設置超過外部容器寬度的數值*/
Overflow 與 absolute 絕對定位
絕對定位元素不總是被父級 overflow 屬性剪裁，尤其當 overflow 在絕對定位元素及其包含塊之間的時候。即 overflow 在絕對定位元素及其包含塊之間時失效。
包含塊指：含
position:relative/absolute/fixed聲明的父級元素，沒有則指 body 元素。
避免 overflow 失效：
- overflow 元素自身為包含塊，即添加屬性
position:relative/absolute/fixed； - overflow 元素的子元素為包含塊，即添加一層 div 作為 overflow 的子元素、絕對定位的父元素，并設置屬性
position:relative/absolute/fixed； - 任意合法 transform 聲明當做包含塊，考慮兼容性，overflow 自身設置 transform 或其子元素設置 transform；
overflow 失效的妙用
依賴 Overflow 的樣式表現
resize 拉伸
-
resize: both水平垂直兩邊拉伸； -
resize: horizontal水平方向拉伸； -
resize: vertical垂直方向拉伸；
但，resize 要想起作用，元素的 overflow屬性不能為 visible！
文本域天生具有resize特性，因為默認
overflow：auto
text-overflow: ellipsis 文字溢出省略
Overflow 與錨點技術
錨點定位的本質是改變容器的滾動高度。其生效的條件有：
- 容器可滾動——overflow 不是 visible,里面元素高于容器；
-
錨點元素在容器內；
錨點定位的觸發
- url地址中的錨鏈與錨點元素；
- 可 focus 的錨點元素處于 focus 狀態；
錨點定位的作用
- 快速定位
- 與 overflow 結合的選項卡技術
但這種技術有明顯的不足，由于錨點定位一直定位到最外層的滾動條，所以點擊錨點后，會使頁面滾動到屏幕最頂端，影響體驗；但應用在單頁應用，沒有滾動條的頁面效果不錯。
