1：overflow簡(jiǎn)介

　　1.1：visible

　　1.2：hidden

　　1.3：scroll

　　1.4：auto

　　1.5：inherit

　　2：overflow與absolute的關(guān)系

　　3：overflow與absolute的應(yīng)用

　　4：解決方法之對(duì)比

　　1來(lái)簡(jiǎn)單的認(rèn)識(shí)一下overflow屬性。

　　overflow屬性規(guī)定內(nèi)容溢出元素框時(shí)發(fā)生的事情，也就是說(shuō)，這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。所有主流瀏覽器都支持 overflow 屬性，但是任何的版本的 Internet Explorer (包括 IE8)都不支持屬性值 "inherit"。聽(tīng)李文華老師說(shuō)，其他css屬性對(duì)inherit的支持也不是很好。所以我學(xué)了那么久沒(méi)有一次用過(guò)inherit屬性，基本上可以視而不見(jiàn)了。overflow含有以下屬性值：visible/hidden/scroll/auto/inherit。跟大家交單介紹一下。

　　visible：默認(rèn)值，內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。

　　hidden：內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的。也就是說(shuō)，當(dāng)子元素的內(nèi)容區(qū)域大于父元素的寬高的時(shí)候，子元素的超出部分會(huì)被剪裁，不顯示被剪裁內(nèi)容。

　　scroll：內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。不管內(nèi)容是否大于或小于父容器寬度，都會(huì)出現(xiàn)滾動(dòng)條。

　　auto：如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

　　也就是說(shuō)，如果水平方向略小于父容器寬度(滾動(dòng)條在Chrome/Firefox/IE edge會(huì)占據(jù)17px的寬度)，而錘子方向大于父容器的寬度，那么只有垂直方向才會(huì)出現(xiàn)滾動(dòng)條。

　　如果垂直方向略小于父容器寬度(原因同上)，而水平方向大于父容器的寬度，那么只有水平方向才會(huì)出現(xiàn)滾動(dòng)條。

　　2

　　眾所周知，當(dāng)父元素沒(méi)有設(shè)置高度，高度隨內(nèi)容撐開(kāi)，子元素浮動(dòng)的情況下，父元素的高度會(huì)發(fā)生塌陷。

　　想要清除內(nèi)部浮動(dòng)的方法有兩種。之前float的分享中就已經(jīng)介紹過(guò)，再說(shuō)一次吧。第一就是在父容器底部插入空div。css部分就用到了overflow屬性。第二就是為父元素設(shè)置一個(gè)偽元素after。使用了clear屬性。這種方法經(jīng)常被用于清除內(nèi)部元素浮動(dòng)導(dǎo)致的父元素高度塌陷的現(xiàn)象。

　　填寫(xiě)下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)java課程!害怕學(xué)不會(huì)?助教全程陪讀，隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí)，可全國(guó)推薦就業(yè)!

　　詳細(xì)的css代碼如下。

　　我們知道，absolute同樣可以使父元素高度塌陷。那能否使用跟上面的方法，也就是使用overflow屬性來(lái)重現(xiàn)父容器的高度呢?答案是：不行。

　　子元素設(shè)置了absolute，會(huì)突破父元素overflow的限制，既不會(huì)被剪裁，也不會(huì)在內(nèi)部添加滾動(dòng)條，按照原來(lái)的尺寸顯示。也就是說(shuō)，不管是設(shè)置了hidden還是auto，都沒(méi)有用，子元素都會(huì)突破父元素的限制。而且在設(shè)置了scroll的情況下，子元素雖然在父元素內(nèi)部，但是滾動(dòng)條失效。

　　那應(yīng)該如何處理absolute的囂張氣焰呢?有如下兩種方法。

　　提示：父元素寬高400px。子元素寬高500px。

　　2.1：為子元素添加一層div，設(shè)置relative。代碼如下。

　　2.2：父容器添加relative屬性。

　　3

　　我們來(lái)嘗試一下overflow+absolute的一個(gè)小應(yīng)用。也就是說(shuō)，使用overflow來(lái)消除空格的內(nèi)容，使用absolute來(lái)定位。用這兩個(gè)屬性來(lái)實(shí)現(xiàn) 回到頂部 的效果。

　　4

　　老實(shí)說(shuō)，這兩種方法都可以使用，而且都能很好的兼容各大瀏覽器。大家可能覺(jué)得，沒(méi)有什么區(qū)別阿，都是添加了relative限制absolute無(wú)視overflow的行為。但是還是有很大區(qū)別的。

　　第二種方法中，relative是直接添加在父容器上的，這會(huì)導(dǎo)致父容器的z-index值發(fā)生變化，會(huì)相比其他同級(jí)div高了一個(gè)z-index值。層疊關(guān)系發(fā)生變化會(huì)在頁(yè)面重構(gòu)的時(shí)候發(fā)生意想不到的結(jié)果。而第一種方法只是在子元素外部，父元素內(nèi)部添加了空div，完全不影響父元素的層級(jí)關(guān)系。所以我還是推薦第一種寫(xiě)法的。

　　雖然我沒(méi)有正式做過(guò)項(xiàng)目，但是在一大堆代碼中要找出這個(gè)bug，會(huì)相當(dāng)困難。