CSS overflow 內容「溢出邊界」區塊層元素

例如區塊中使用了 float:left 若是沒有背景色或邊框，可能沒發現區塊實際的位置 隱藏區塊顏色

<div style="float: left">float:Left</div>
<div>Content-A</div>
<div>Content-B</div>
<div>Content-C</div>

使用 overflow: hidden 的情況

<div style="float: left">float:Left</div>
<div style="overflow: hidden">Content-A</div>
<div style="overflow: hidden">Content-B</div>
<div style="overflow: hidden">Content-C</div>

雖然沒有背景色或邊框的情況下看來差不多，但是 Content-A~B 的內邊距 padding-left 就有些差異。
再某些位置計算的情況下或許有差異吧。

overflow 屬性值

設定如何處理元素框的顯示內容，主要有四個參數分別是 visible, hidden, scroll, auto 當元素框內容超出元素的矩框時要如何顯示，可以使用於區塊元素 block 與內聯元素 inline-block 如需要限制在某個範圍內避免影響版面配置時，就可以透過其設定讓圖片或文字區塊在固定的範圍內呈現，當超出範圍時自動變成捲軸呈現方式。

overflow 屬性	屬性值顯示內容
visible	內容不會被修剪，當超出元素的範圍時內容會呈現在元素框之外。
hidden	內容會被修剪，但不會顯示捲軸，當超出元素的範圍時隱藏內容。
scroll	內容會被修剪，當超出範圍時自動變成捲軸呈現方式。
auto	自動選擇由瀏覽器決定如何顯示(預設值)，當超出範圍時自動變成捲軸呈現方式。
overflow-x	可設定「水平」方向，當超出範圍時自動變成捲軸呈現方式。(需要內有寬度大於元素框的物件)
overflow-y	可設定「垂直」方向，當超出範圍時自動變成捲軸呈現方式。

jQuery Scroll 對元素捲軸的偏移及顯示設定

$("匹配元素").on("mouseenter mouseleave", function (event) { //挷定滑鼠進入及離開事件
  if (event.type == "mouseenter") {
    $(this).css({"overflow-y": "scroll"}); //滑鼠進入
  } else {
    $(this).scrollTop(0).css({"overflow-y": "hidden"}); //滑鼠離開
  }
});