摘要：一般地，一個(gè)塊盒的內(nèi)容都被限制在該盒的邊內(nèi)。這種盒并不一定會(huì)根據(jù)其祖先的屬性裁剪。默認(rèn)情況下，元素不會(huì)被裁剪。在閉合路徑內(nèi)的內(nèi)容會(huì)顯示，而路徑外邊的都會(huì)被剪掉著作權(quán)歸作者所有。

一般地，一個(gè)塊盒的內(nèi)容都被限制在該盒的content邊內(nèi)。某些情況下，一個(gè)盒可能會(huì)溢出，意味著它的部分內(nèi)容或者全部內(nèi)容位于該盒外部，例如：

一行無法拆分，導(dǎo)致行盒比塊盒寬

一個(gè)塊級(jí)盒對(duì)其包含塊來說太寬了。當(dāng)一個(gè)元素的width屬性具有一個(gè)能讓生成盒從包含塊的邊內(nèi)溢出的值時(shí)，可能會(huì)發(fā)生這種情況

一個(gè)元素的高度超出了為其包含塊顯式指定的高度（即，包含塊的高度由height屬性決定，而不是由內(nèi)容高度）

一個(gè)后代盒是絕對(duì)定位的，部分內(nèi)容在該盒外部。這種盒并不一定會(huì)根據(jù)其祖先的overflow屬性裁剪。特殊的，它們不會(huì)被介于自身和包含塊之間的任意祖先的overflow裁剪

一個(gè)后代盒具有負(fù)margin，導(dǎo)致它的部分內(nèi)容被定為在該盒外部

text-indent屬性讓一個(gè)行盒掛在該塊盒的left或者right邊上

出現(xiàn)溢出時(shí)，overflow屬性指定了一個(gè)盒是否應(yīng)該被裁剪到其padding邊內(nèi)，以及是否需要提供一種滾動(dòng)機(jī)制來訪問所有被裁剪掉的內(nèi)容

overflow各種屬性值的表現(xiàn)

在本例中,overflow:visible默認(rèn),對(duì)溢出不作處理;overflow:hidden對(duì)溢出部分進(jìn)行隱藏;overflow:scroll對(duì)右邊以及下邊做出滾動(dòng)條處理,不管元素是否溢出;overflow:auto對(duì)溢出部分做滾動(dòng)條處理;overflow:inherit應(yīng)該從父元素繼承overflow屬性的值

css3新特性

css3中增加了overflow-x以及overflow-y分別代表水平方向和垂直方向的overflow,這兩個(gè)屬性是相同值時(shí),等同于overflow的屬性值;這兩個(gè)值一個(gè)非overflow:visible,一個(gè)為overflow:visible時(shí),overflow:visible的屬性值會(huì)變?yōu)?br>overflow:auto

overflow起作用的前提:

非display:inline水平

對(duì)應(yīng)方位的尺寸限制.width/height/max-width/max-height/absolute拉伸

對(duì)于單元格td等,還需要table為table-layout:fixed狀態(tài)才行

對(duì)于ie7瀏覽器來說,使用overflow會(huì)有一些bug:

滾動(dòng)條樣式不同(這一條在win10中都一樣)

寬度設(shè)定機(jī)制,對(duì)于子元素設(shè)置width:100%,ie7會(huì)按照父元素寬度計(jì)算,也就是400px,而子元素有垂直滾動(dòng)條占據(jù)一部分空間,所以實(shí)際水平寬度不到400px,因此水平滾動(dòng)條會(huì)出現(xiàn)
解決方法是去掉width:100%

  

  


.box{
  width: 400px;
  height: 100px;
  overflow: auto;
}
.content{
  width: 100%;
  height: 200px;
  background-color: #beceeb;
}

ie7瀏覽器下,文字越多,按鈕兩側(cè)padding留白就越大,這時(shí),給按鈕樣式添加overflow:visiable就能解決

overflow:auto/overflow:scroll,html標(biāo)簽,textarea標(biāo)簽

子元素超出父元素限制

在瀏覽器中,默認(rèn)滾動(dòng)條均來自而不是

原因:新建一個(gè)空白html,默認(rèn).5em margin,如果滾動(dòng)條來自,則應(yīng)該有邊距,而不是靠著瀏覽器邊緣

IE7-瀏覽器默認(rèn): html{ overflow-y:scroll}

IE8+瀏覽器默認(rèn): html{overflow:auto}

所以我們?nèi)コ撁婺J(rèn)滾動(dòng)條,只需要:

html{ overflow:hidden}

使用js獲取滾動(dòng)高度

Chrome瀏覽器是:document.body.scrollTop

其他瀏覽器: document.documentElement.scrollTop

為了兼容性建議使用: var st=document.documentElement.scrollTop||document.body.scrollTop

 .box{
  width: 400px;
  height: 100px;
  padding: 100px 0;
  overflow: auto;
  border: 1px solid #000;
}

上面的代碼在Chrome瀏覽器中會(huì)出現(xiàn)padding-bottom,而在其它瀏覽器中都不會(huì)出現(xiàn),這樣就導(dǎo)致出現(xiàn)不一樣的scrollHeight

準(zhǔn)確說法應(yīng)該是滾動(dòng)欄的寬度.下面方法可以簡單獲得:

.box{
  width: 400px;
  overflow:scroll;
}
.in{
  *zoom:1;
}

  

  

var a = console.log (400-document.getElementsById("in").clientWidth);

滾動(dòng)條會(huì)占用容器尺寸,原本和諧的布局,滾動(dòng)條出現(xiàn)后可能會(huì)錯(cuò)位或者出現(xiàn)水平滾動(dòng)條,在實(shí)現(xiàn)這種布局時(shí)一般使用自適應(yīng)布局或者預(yù)留合適寬度

.container{width:1150px;margin:0 auto}

這種使用水平居中的布局,因?yàn)闈L動(dòng)條會(huì)占用一部分空間,所以滾動(dòng)的時(shí)候會(huì)跳動(dòng),向左偏移滾動(dòng)條寬度

水平居中跳動(dòng)問題的修復(fù)

1.html{overflow-y:scroll}

這個(gè)解決方案唯一缺點(diǎn)就是不美觀,會(huì)出現(xiàn)滾動(dòng)條

2..container{padding-left:calc(100vw-100%);}
100vw-瀏覽器寬度; 100%-可用內(nèi)容寬度;這個(gè)解決方案需要IE9+支持

非overflow:visible可以觸發(fā)BFC

清除浮動(dòng)影響

避免margin穿透問題

兩欄自適應(yīng)布局

1.overflow內(nèi)部float無影響,IE6是不支持的,所以才有了廣為流傳的清除浮動(dòng)方法:

清除浮動(dòng)方法

3.overflow與兩欄自適應(yīng)布局

使用overflow實(shí)現(xiàn)兩欄自適應(yīng)布局

還有一種廣為流傳的實(shí)現(xiàn)兩欄自適應(yīng)布局的方法,使用table-cell

table-cell實(shí)現(xiàn)兩欄自適應(yīng)布局

隱藏失效與滾動(dòng)固定

在上面的例子中,一旦子元素設(shè)置為absolute,父元素的overflow屬性會(huì)失效

絕對(duì)定位元素不總是被父級(jí)overflow屬性裁剪,尤其當(dāng)overflow在絕對(duì)定位元素及其包含塊之間的時(shí)候

如何避免失效

overflow元素自身為包含塊

overflow元素的子元素為包含塊

任意合法transform聲明當(dāng)作包含塊

transform聲明當(dāng)作包含塊

overflow元素自身transform

overflow子元素transform

避免失效例子

居中及邊緣對(duì)齊定位

這里面的邊緣對(duì)齊定位,使用的就是父元素overflow:hidden,子元素的 被隱藏,后面的圖片設(shè)置position:absolute使overflow對(duì)于圖片的作用失效,從而實(shí)現(xiàn)滾動(dòng)條上下滾動(dòng)的邊緣定位效果

CSS3有個(gè)屬性名為resize,可以拉伸元素尺寸:

resize:both水平垂直兩邊拉

resize:horizontal只有水平方向拉伸

resize:vertical只有垂直方向拉伸

但是,此聲明起作用的前提是元素不是overflow:visible

一些依賴overflow的樣式表現(xiàn)

例1中,我們給button使用了一個(gè)overflow:hidden以及resize:both,button可以水平垂直拉伸
例2是一個(gè)textarea,因?yàn)樗J(rèn)overflow:auto,所以它默認(rèn)就能拉伸
例3是我們給段落一個(gè)overflow:hidden以及text-overflow:ellipsis,就會(huì)在最后顯示...(省略號(hào))

錨點(diǎn)與錨鏈

在這個(gè)例子中,通過的#mm3(錨鏈)找到圖片的id(錨點(diǎn))來定位

裁剪區(qū)域（clipping region）定義了一個(gè)元素border box的哪一部分是可見的。默認(rèn)情況下，元素不會(huì)被裁剪。然而，裁剪區(qū)域可以通過clip屬性顯式地設(shè)置

clip-path:  | [  ||  ] | none

 = 
 =  |  |  | 
 =  | fill-box | stroke-box | view-box

 = inset( {1,4} [ round  ]? )
 = circle( [  ]? [ at  ]? )
 = ellipse( [ {2} ]? [ at  ]? )
 = polygon( ? , [   ]# )
 =  | margin-box

 =  | 
 =  | closest-side | farthest-side
 = [[ left | center | right | top | bottom |  ] | [ left | center | right |  ] [ top | center | bottom |  ] | [ center | [ left | right ] ? ] && [ center | [ top | bottom ] ? ]]
 = nonzero | evenodd
 = border-box | padding-box | content-box = border-box | padding-box | content-box