這篇文章將介紹一個新特性，從 Chrome 90 開始，overflow 新增的一個新特性 -- overflow: clip，使用它，輕鬆的對溢出方向進行控制。
#首先，簡單介紹下 overflow: clip 的用法。
overflow: clip: 與 overflow: hidden 的表現形式極為類似，也是對元素的 padding-box 進行裁切。 【學習影片分享：css影片教學、web前端】
#但是，它們有兩點不同：
也就是overflow: clip 內部完全禁止任何形式的滾動。當然，這不是今天的重點，暫且略過不談。
MDN 原文：The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.
#overflow: clip 可以從x，y 軸方向上對裁切進行，控制，而overflow: hidden 不行。
重點在於這一點。讓我們來簡單示意：
我們來看對於不區分方向，overflow: clip與overflow: hidden 的表現形式：
<div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p> </div> <div class="hidden"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p> </div> <div class="clip"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p> </div>
.hidden {
overflow: hidden;
}
.clip {
overflow: clip;
}我們設定了3 個DIV 容器，其中一個不設定overflow，另外兩個分別設定overflow: clip 與overflow: hidden。效果如下：
此時，overflow: clip 與 overflow: hidden 的表現是一致的。
overflow: clip 在x/y 軸上可單獨設定然而，overflow: clip 的與眾不同之處在於，它可以單獨設定給x 軸或y 軸，使得容器擁有某一個方向上的裁剪能力，而相對的另一個方向，允許溢出。
看看這個DEMO：
這裡的現象值得注意：
單一設定overflow -x: hidden 或overflow-y: hidden#，表現形式都和overflow: hidden 一致，是全方位的裁切
而水平x 或垂直y 方向的overflow-x: clip/ overflow-y: clip 配合另一個方向的overflow-x: visible# ，卻能夠實現一個方向允許溢出，一個方向實現裁剪！
需要解釋上面兩點：
設定overflow: hidden 就會建立BFC，所以沒法只限制一個方向；而overflow: clip 不會創建BFC，因此它們在許多表現上會產生不一致的現象（譬如）
overflow-x/y設定為hidden 時, overflow-y/x 會變成auto, 即使設定為visible
完整的DEMO，你可以戳這裡：CodePen Demo -- overflow: hidden & overflow: clip
至此，我們就實現了這樣一種效果，允許元素在x/y 方向上的單向裁剪，像是這樣：
(上圖允許x 軸方向上的溢出，而y 軸方向進行了裁剪)
OK，那麼，如果再進一步。譬如有這麼個需求，要求上、左、右方向允許溢出，而下方向需要裁剪，能做到麼？
答案是可以的。
CSS 中其實還有多種方式可以進行元素的裁切，近似的實現類似於 overflow: hidden 的功能。
譬如，其中，我們可以使用 clip-path 實現上、下、左、右 單一方向的裁切。這是我之前一篇文章的內容 -- 如何不使用 overflow: hidden 實作 overflow: hidden，有興趣可以看看。
原文網址：https://www.cnblogs.com/coco1s/p/16627152.html
作者：ChokCoco
更多程式相關知識，請造訪：程式設計影片！ ！
以上是CSS新特性學習：方向裁切overflow:clip的詳細內容。更多資訊請關注PHP中文網其他相關文章！
