CSS3：overflow屬性詳解

1.Overflow

overflow為溢出（容器），當內容超出容器時只需添加overflow屬性值為hidden， 就可以把超出容器的部分隱藏起來；

如果內容超出容器卻又不想其隱藏時可以將其屬性值設置為auto；

overflow：auto 屬性如果超出就出現滾動條，沒有超出則不出現滾動條這樣就可以出現滾動條，

滾動條也可以單獨設置，例如overflow-x：hidden；overflow-y：auto；這樣就只能看見垂直方向的滾動條了。如果單獨定義x軸或者y軸的時候，兩個屬性都需設置屬性值。

原始效果：

​​​

 

1.添加overflow：hidden；屬性，效果：

​

可以看到，overflow：hidden會把超出盒子的部分隱藏，也可以理解為切斷。

2.添加overflow-x：hidden；overflow-y：auto屬性

​

屬性設為overflow-x：auto；overflow-y：hidden；與上圖效果正好相反，即滾動條側邊隱藏，會出現在底部。

---

2.overflow的常見屬性值

Overflow屬心常見的有四個：visible，hidden，auto和scroll；

visible為overflow 的默認值，為超出顯示；

hidden為超出隱藏；

auto為自動，即超出會出現滾動條， 不超出就沒有滾動條；

scroll為內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。

---

3.overflow的神奇用法

第一種用法：解決margin-top的傳遞問題

margin-top的傳遞問題:子元素的margin-top會把父元素一起帶下來，給父元素加overflow:hidden即可解決

第二種用法：清除浮動帶來的影響  --- 父元素高度塌陷

萬能清除法

overflow:hidden

clear:both

第三種用法：顯隱動畫  --- 超出隱藏

第四種用法：單行文本超出省略

.sl{

    white-space:nowrap;/*不換行*/

    overflow:hidden;/*超出隱藏*/
    
    text-overflow:ellipsis;/*超出省略*/

    width:;

}

注意要設置寬度

---

好啦，以上就是小譚今天要分享的內容啦，如果有什么寫的不好的地方歡迎各位大佬指點一二，小譚不勝榮幸！啾咪~