為什么需要深入學習CSS溢出機制？
在實際開發的過程中，內容溢出是經常見到的。如果不深入了解這個機制，你經常會碰到這樣的問題：為什么這個元素沒有受到祖先元素的overflow:hidden的影響？這里出現的滾動條是哪個元素的？如果消除這個滾動條？如何在指定的元素上增加滾動功能？
在這篇文章，我們將會從CSS標準出發，討論CSS溢出機制的細節。
溢出
當一個盒子（block container box）的內容（子元素、孫子元素等后裔）超過盒子本身的大小的時候，就會出現溢出。這個時候CSS屬性overflow決定如何處理溢出。這個css屬性大家都知道，在這里不討論了，在這里指出需要注意的幾點：
overflow會影響所在元素的所有內容的裁剪、滾動，但是有一種情況例外："It affects the clipping of all of the element’s content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element." 也就是說，overflow的所在元素必須是內容元素的直接或間接containing block，這時overflow屬性才會影響這個內容元素。比如<A><B><C><C/><B/><A/>，一般來說，B的overflow會影響C，但是如果C是相對于viewport或者A定位的（比如使用了position:absolute），那么C的顯示就不受B的裁剪、滾動的影響。
當需要滾動條的時候，滾動條會放在border與padding之間。父元素產生滾動條以后，它產生的containing block的尺寸會減少，以便給滾動條騰出空間。
在<html>和<body>上的overflow屬性存在冒泡現象: "UAs must apply the ‘overflow’ property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the ‘overflow’ property from the first such child element to the viewport, if the value on the root element is ‘visible’. The ‘visible’ value when used for the viewport must be interpreted as ‘auto’. The element from which the value is propagated must have a used value for ‘overflow’ of ‘visible’. "
可以推斷出：
一般來說只有元素才能擁有滾動條（更準確地說，只有產生block container box的元素才能擁有滾動條）。但visual viewport是個例外。它雖然不是一個元素，但是也可以擁有滾動條。如果在<html>和<body>上都沒有設置overflow屬性而使用默認值visible（大部分場景都是這樣），那么，visual viewport的overflow就是auto：當網頁中有內容超出visual viewport時，visual viewport上會出現滾動條。
<html>的最終overflow永遠都是visible。也就是說，<html>元素永遠不可能擁有滾動條。
新聞熱點
疑難解答
